Ich versuche, eine horizontale Bildlaufliste mit Elementen in Flutter zu erstellen, und ich möchte, dass diese Liste nur die erforderliche Höhe basierend auf ihren untergeordneten Elementen einnimmt. Mit Absicht " ListView
versucht zu erweitern, um den verfügbaren Raum in seiner Querrichtung anzupassen " (aus den Flutter-Dokumenten ), was ich auch dadurch bemerke, dass es die gesamte Höhe des Ansichtsfensters einnimmt, aber es gibt eine Möglichkeit, dies nicht zu tun Dies? Im Idealfall etwas Ähnliches (was offensichtlich nicht funktioniert):
new ListView(
scrollDirection: Axis.horizontal,
crossAxisSize: CrossAxisSize.min,
children: <Widget>[
new ListItem(),
new ListItem(),
// ...
],
);
Mir ist klar , dass ein Weg , dies zu tun ist durch die Umhüllung ListView
in einem Container
mit einer festen Höhe. Ich kenne jedoch nicht unbedingt die Höhe der Gegenstände:
new Container(
height: 97.0,
child: new ListView(
scrollDirection: Axis.horizontal,
children: <Widget>[
new ListItem(),
new ListItem(),
// ...
],
),
);
Ich konnte eine „Lösung“ zusammen hacken, indem ich a Row
in a SingleChildScrollView
in a Column
mit a verschachtelte mainAxisSize: MainAxisSize.min
. Für mich ist dies jedoch keine Lösung:
new Column(
mainAxisSize: MainAxisSize.min,
children: <Widget>[
new SingleChildScrollView(
scrollDirection: Axis.horizontal,
child: new Row(
children: <Widget>[
new ListItem(),
new ListItem(),
// ...
],
),
),
],
);
ListView
die Höhe hat, die auf der Größe der Kinder basiert? Ist dieSingleChildScrollView
BasisListView
die einzige Option? Ich würde wirklich gerne ein verwenden,ListView
da es semantisch korrekter ist.Antworten:
Setzen Sie einfach die
shrink
Eigenschaft vonListView
auftrue
und es passt eher zum Raum als zur Erweiterung.Beispiel:
ListView( shrinkWrap: true, //just set this property padding: const EdgeInsets.all(8.0), children: listItems.toList(), ),
quelle
shrinkWrap
wird dieListView
entlang der Hauptachse schrumpfen . Nicht wie gewünscht entlang der Querachse.Verwenden Sie
ConstrainedBox
zum EinstellenminHeight
undmaxHeight
ConstrainedBox( constraints: new BoxConstraints( minHeight: 35.0, maxHeight: 160.0, ), child: new ListView( shrinkWrap: true, children: <Widget>[ new ListItem(), new ListItem(), ], ), )
quelle
Ich verwende einen horizontalen Listenansicht-Builder für Container, um zu verhindern, dass der Container die volle Höhe annimmt. Ich habe ihn gerade mit Center umwickelt und er hat perfekt funktioniert.
itemBuilder: (context, i){ return Center(child: word_on_line(titles[i])); }
quelle
Verwenden Sie Erweitert
Expanded( child:ListView.separated( shrinkWrap: true, padding: EdgeInsets.all(10), separatorBuilder: (BuildContext context, int index) { return Align( alignment: Alignment.centerRight, child: Container( height: 0.5, width: MediaQuery.of(context).size.width / 1.3, child: Divider(), ), ); }, itemCount: dataMasterClass.length, itemBuilder: (BuildContext context, int index) { Datum datum = dataMasterClass[index]; return sendItem(datum); },) ) ,
quelle
Wenn Sie alle oben genannten Lösungen anwenden, wird noch keine passende Antwort gefunden, die uns hilft, die horizontale Listenansicht festzulegen, wenn wir die Höhe nicht kennen. wir müssen in allen Fällen die Höhe einstellen. Daher habe ich die folgende Lösung angewendet, die für mich funktioniert, ohne eine Höhe für die Listenelemente anzugeben. was @sindrenm bereits in seiner Frage erwähnt hat. deshalb würde ich gerne so weitermachen, bis eine praktikable Lösung gefunden wird. Ich habe shrinkWrap: true angewendet, aber es wird die ListView entlang der Hauptachse verkleinern. (nur für vertikale Bildlaufansicht) und Nicht entlang der Querachse, wie in der Frage gestellt. In naher Zukunft kann jeder diese Lösung auch in der Produktion einsetzen. Sie eignet sich hervorragend für alle horizontalen Listen.
//below declared somewhere in a class above any method and assume list has filled from some API. var mylist = List<myModel>(); SingleChildScrollView( scrollDirection: Axis.horizontal, child: Padding( padding: const EdgeInsets.all(8.0), child: Row( children: [ for (int index = 0; index < mylist.length; index++) listItem(mylist[index]); ], ), ), ), listItem(){ return Column( children[ widget1(), widget2().... etc.. ]); }
quelle
Das Einpacken des Widgets
Column
mitmainAxisSize: MainAxisSize.min
hat für mich funktioniert. Sie können versuchen, dasheight
hier zu ändern .var data = [ {'name': 'Shopping', 'icon': Icons.local_shipping}, {'name': 'Service', 'icon': Icons.room_service}, {'name': 'Hotel', 'icon': Icons.hotel}, {'name': 'More', 'icon': Icons.more} ]; new Container( constraints: new BoxConstraints( minHeight: 40.0, maxHeight: 60.0, ), color: Colors.transparent, child: new ListView( scrollDirection: Axis.horizontal, children: data .map<Widget>((e) => Column( mainAxisSize: MainAxisSize.min, children: <Widget>[ new Container( width: 40, height: 50, // try to change this. color: Colors.transparent, margin: EdgeInsets.only(right: 20, left: 4), child: ClipOval( child: Container( padding: EdgeInsets.all(4), color: Colors.white, child: Icon( e["icon"], color: Colors.grey, size: 30, ), ), ), ), ], )) .toList(), ));
quelle