Próbuję stworzyć prostą stronę logowania do mojej aplikacji Flutter. Udało mi się zbudować przyciski TextField i Login / Signin. Chcę dodać poziomy ListView. Kiedy uruchamiam kod, moje elementy znikają, jeśli zrobię to bez ListView, znowu jest dobrze. Jak mogę to zrobić poprawnie?
return new MaterialApp(
home: new Scaffold(
appBar: new AppBar(
title: new Text("Login / Signup"),
),
body: new Container(
child: new Center(
child: new Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
new TextField(
decoration: new InputDecoration(
hintText: "E M A I L A D D R E S S"
),
),
new Padding(padding: new EdgeInsets.all(15.00)),
new TextField(obscureText: true,
decoration: new InputDecoration(
hintText: "P A S S W O R D"
),
),
new Padding(padding: new EdgeInsets.all(15.00)),
new TextField(decoration: new InputDecoration(
hintText: "U S E R N A M E"
),),
new RaisedButton(onPressed: null,
child: new Text("SIGNUP"),),
new Padding(padding: new EdgeInsets.all(15.00)),
new RaisedButton(onPressed: null,
child: new Text("LOGIN"),),
new Padding(padding: new EdgeInsets.all(15.00)),
new ListView(scrollDirection: Axis.horizontal,
children: <Widget>[
new RaisedButton(onPressed: null,
child: new Text("Facebook"),),
new Padding(padding: new EdgeInsets.all(5.00)),
new RaisedButton(onPressed: null,
child: new Text("Google"),)
],)
],
),
),
margin: new EdgeInsets.all(15.00),
),
),
);
źródło
Ja też mam ten problem. Moim rozwiązaniem jest użycie
Expanded
widżetu, aby powiększyć pozostałą przestrzeń.źródło
Przyczyna błędu:
Column
rozwija się do maksymalnego rozmiaru w kierunku osi głównej (oś pionowa), podobnie jakListView
.Rozwiązania
Musisz więc ograniczyć wysokość
ListView
. Jest na to wiele sposobów, możesz wybrać ten, który najlepiej odpowiada Twoim potrzebom.Jeśli chcesz pozwolić
ListView
zająć całą pozostałą przestrzeń w środku,Column
użyjExpanded
.Jeśli chcesz ograniczyć się
ListView
do pewnościheight
, możesz użyćSizedBox
.Jeśli twój
ListView
jest mały, możesz spróbowaćshrinkWrap
na nim nieruchomości.źródło
Mam
SingleChildScrollView
jako rodzica i jednegoColumn
widżet, a następnie widżet widoku listy jako ostatnie dziecko.Dodanie tych właściwości w widoku listy zadziałało dla mnie.
źródło
Expanded Widget zwiększa swój rozmiar tak bardzo, jak to tylko możliwe dzięki dostępnemu miejscu. Ponieważ ListView ma zasadniczo nieskończoną wysokość, spowoduje błąd.
Tutaj powinniśmy użyć elastycznego widżetu, ponieważ zajmie tylko wymaganą przestrzeń, ponieważ rozwinięty zajmuje pełny ekran, nawet jeśli nie ma wystarczającej liczby widżetów do renderowania na pełnym ekranie.
źródło
Właściwie, kiedy czytasz dokumenty, ListView powinien znajdować się wewnątrz Expanded Widget, aby mógł działać.
}
źródło
Jak wspomnieli inni powyżej, rozwiązaniem jest Wrap listview with Expanded.
Ale kiedy zajmujesz się zagnieżdżonymi kolumnami, będziesz musiał również ograniczyć ListView do określonej wysokości (często napotykasz ten problem).
Jeśli ktoś ma inne rozwiązanie, proszę o wzmiankę w komentarzu lub dodanie odpowiedzi.
Przykład
źródło
Możesz używać
Flex
iFlexible
widżetów. na przykład:);
źródło
źródło
Spróbuj użyć Slivers:
źródło