Otrzymuję wyjątek dotyczący renderowania, którego nie rozumiem, jak to naprawić. Próbuję utworzyć kolumnę, która ma 3 wiersze.
Wiersz [obraz]
Wiersz [TextField]
Wiersz [przyciski]
Oto mój kod do zbudowania kontenera:
Container buildEnterAppContainer(BuildContext context) {
var container = new Container(
padding: const EdgeInsets.all(8.0),
child: new Column(
mainAxisAlignment: MainAxisAlignment.start,
children: <Widget>[
buildImageRow(context),
buildAppEntryRow(context),
buildButtonRow(context)
],
),
);
return container;
}
i mój kod buildAppEntryRow dla kontenera tekstu
Widget buildAppEntryRow(BuildContext context) {
return new Row(
children: <Widget>[
new TextField(
decoration: const InputDecoration(helperText: "Enter App ID"),
style: Theme.of(context).textTheme.body1,
)
],
);
}
Kiedy biegam, pojawia się następujący wyjątek:
I/flutter ( 7674): BoxConstraints forces an infinite width.
I/flutter ( 7674): These invalid constraints were provided to RenderStack's layout() function by the following
I/flutter ( 7674): function, which probably computed the invalid constraints in question:
I/flutter ( 7674): RenderConstrainedBox.performLayout (package:flutter/src/rendering/proxy_box.dart:256:13)
I/flutter ( 7674): The offending constraints were:
I/flutter ( 7674): BoxConstraints(w=Infinity, 0.0<=h<=Infinity)
Jeśli zamiast tego zmienię buildAppEntryRow na tylko TextField
Widget buildAppEntryRow2(BuildContext context) {
return new TextField(
decoration: const InputDecoration(helperText: "Enter App ID"),
style: Theme.of(context).textTheme.body1,
);
}
Nie mam już wyjątku. Czego brakuje mi w implementacji Row, co powoduje, że nie jest w stanie obliczyć rozmiaru tego wiersza?
mainAxisAlignment
działanie widżetu Wiersz. Z dwoma widżetami tekstowymi nie ma problemu, ale z widżetem tekstowym i zawartym wFlexible
nim widżetem Pole tekstowe jest wyrównany do lewej bez odstępów.Otrzymujesz ten błąd, ponieważ
TextField
rozszerza się w kierunku poziomym, podobnie jakRow
, więc musimy ograniczyć szerokośćTextField
, jest na to wiele sposobów.Posługiwać się
Expanded
Posługiwać się
Flexible
Owiń go
Container
lubSizedBox
i podajwidth
źródło
TextField
w jednym rzędzie.aby użyć pola tekstowego wewnątrz wiersza, należy użyć opcji Elastyczny.
źródło
Container
, możesz użyćFlexible
bezpośrednio.Rozwiązaniem jest umieszczenie
Text()
wewnątrz jednego z następujących widżetów: AlboExpanded
alboFlexible
. Tak więc Twój kod używający Expanded będzie wyglądał następująco:źródło
Jak wspomniał @Asif Shiraz, miałem ten sam problem i rozwiązałem go, zawijając kolumnę w elastyczny, tutaj w ten sposób,
źródło
Prostym rozwiązaniem jest owinięcie
Text()
wewnątrz plikuContainer()
. Twój kod będzie więc wyglądał następująco:Tutaj możesz również uzyskać atrybut szerokości i wysokości kontenera, aby dostosować wygląd i styl pola tekstowego. Nie ma potrzeby używania,
Flexible
jeśli zawijasz pole tekstowe wewnątrz kontenera.źródło
width: n