Ligne de liste déroulante Flutter
new ListView(
children: [
new SizedBox(
height: 100.0,
child: ListView(
scrollDirection: Axis.horizontal,
children: <Widget>[
new Text("hi"),
new Text("hi"),
new Text("hi"),
],
),
),
],
),
J'ai utilisé la boîte dimensionnée et semble toujours avoir l'erreur.
Voici mon arborescence de widgets: SingleChildScrollView -> Column -> children
Performing hot reload... flutter: ══╡ EXCEPTION CAUGHT BY RENDERING LIBRARY ╞═════════════════════════════════════════════════════════ flutter: The following assertion was thrown during performResize(): flutter: Vertical viewport was given unbounded height. flutter: Viewports expand in the scrolling direction to fill their container.In this case, a vertical flutter: viewport was given an unlimited amount of vertical space in which to expand. This situation flutter: typically happens when a scrollable widget is nested inside another scrollable widget. flutter: If this widget is always nested in a scrollable widget there is no need to use a viewport because flutter: there will always be enough vertical space for the children. In this case, consider using a Column flutter: instead. Otherwise, consider using the "shrinkWrap" property (or a ShrinkWrappingViewport) to size flutter: the height of the viewport to the sum of the heights of its children. flutter: flutter: When the exception was thrown, this was the stack: flutter: #0 RenderViewport.performResize.<anonymous closure> (package:flutter/src/rendering/viewport.Dart:944:15) flutter:
#1 RenderViewport.performResize (package:flutter/src/rendering/viewport.Dart:997:6) flutter: #2 RenderObject.layout (package:flutter/src/rendering/object.Dart:1555:9) flutter: #3
_RenderProxyBox&RenderBox&RenderObjectWithChildMixin&RenderProxyBoxMixin.performLayout (package:flutter/src/rendering/proxy_box.Dart:109:13) flutter: #4 RenderObject.layout (package:flutter/src/rendering/object.Dart:1570:7) flutter: #5
_RenderProxyBox&RenderBox&RenderObjectWithChildMixin&RenderProxyBoxMixin.performLayout (package:flutter/src/rendering/proxy_box.Dart:109:13) flutter: #6 RenderObject.layout (package:flutter/src/rendering/object.Dart:1570:7) flutter: #7
_RenderProxyBox&RenderBox&RenderObjectWithChildMixin&RenderProxyBoxMixin.performLayout (package:flutter/src/rendering/proxy_box.Dart:109:13) flutter: #8 RenderObject.layout (package:flutter/src/rendering/object.Dart:1570:7) flutter: #9
_RenderProxyBox&RenderBox&RenderObjectWithChildMixin&RenderProxyBoxMixin.performLayout (package:flutter/src/rendering/proxy_box.Dart:109:13) flutter: #10 RenderObject.layout (package:flutter/src/rendering/object.Dart:1570:7) flutter: #11
_RenderProxyBox&RenderBox&RenderObjectWithChildMixin&RenderProxyBoxMixin.performLayout (package:flutter/src/rendering/proxy_box.Dart:109:13) flutter: #12 RenderObject.layout (package:flutter/src/rendering/object.Dart:1570:7) flutter: #13 RenderFlex.performLayout (package:flutter/src/rendering/flex.Dart:738:15) flutter: #14 RenderObject.layout (package:flutter/src/rendering/object.Dart:1570:7) flutter: #15 RenderPadding.performLayout (package:flutter/src/rendering/shifted_box.Dart:199:11) flutter: #16 RenderObject.layout (package:flutter/src/rendering/object.Dart:1570:7) flutter: #17 _RenderSingleChildViewport.performLayout (package:flutter/src/widgets/single_child_scroll_view.Dart:479:13) flutter: #18 RenderObject.layout (package:flutter/src/rendering/object.Dart:1570:7) flutter: #19
_RenderProxyBox&RenderBox&RenderObjectWithChildMixin&RenderProxyBoxMixin.performLayout (package:flutter/src/rendering/proxy_box.Dart:109:13) flutter: #20 RenderObject.layout (package:flutter/src/rendering/object.Dart:1570:7) flutter: #21
_RenderProxyBox&RenderBox&RenderObjectWithChildMixin&RenderProxyBoxMixin.performLayout (package:flutter/src/rendering/proxy_box.Dart:109:13) flutter: #22 RenderObject.layout (package:flutter/src/rendering/object.Dart:1570:7) flutter: #23
_RenderProxyBox&RenderBox&RenderObjectWithChildMixin&RenderProxyBoxMixin.performLayout (package:flutter/src/rendering/proxy_box.Dart:109:13) flutter: #24 RenderObject.layout (package:flutter/src/rendering/object.Dart:1570:7) flutter: #25
_RenderProxyBox&RenderBox&RenderObjectWithChildMixin&RenderProxyBoxMixin.performLayout (package:flutter/src/rendering/proxy_box.Dart:109:13) flutter: #26 RenderObject.layout (package:flutter/src/rendering/object.Dart:1570:7) flutter: #27
_RenderProxyBox&RenderBox&RenderObjectWithChildMixin&RenderProxyBoxMixin.performLayout (package:flutter/src/rendering/proxy_box.Dart:109:13) flutter: #28 RenderObject.layout (package:flutter/src/rendering/object.Dart:1570:7) flutter: #29 RenderPositionedBox.performLayout (package:flutter/src/rendering/shifted_box.Dart:381:13) flutter: #30 RenderObject.layout (package:flutter/src/rendering/object.Dart:1570:7) flutter: #31 MultiChildLayoutDelegate.layoutChild (package:flutter/src/rendering/custom_layout.Dart:141:11) flutter: #32
_ScaffoldLayout.performLayout (package:flutter/src/material/scaffold.Dart:399:7) flutter: #33 MultiChildLayoutDelegate._callPerformLayout (package:flutter/src/rendering/custom_layout.Dart:211:7) flutter: #34 RenderCustomMultiChildLayoutBox.performLayout (package:flutter/src/rendering/custom_layout.Dart:355:14) flutter: #35 RenderObject.layout (package:flutter/src/rendering/object.Dart:1570:7) flutter: #36
_RenderProxyBox&RenderBox&RenderObjectWithChildMixin&RenderProxyBoxMixin.performLayout (package:flutter/src/rendering/proxy_box.Dart:109:13) flutter: #37 RenderObject.layout (package:flutter/src/rendering/object.Dart:1570:7) flutter: #38
_RenderProxyBox&RenderBox&RenderObjectWithChildMixin&RenderProxyBoxMixin.performLayout (package:flutter/src/rendering/proxy_box.Dart:109:13) flutter: #39
_RenderCustomClip.performLayout (package:flutter/src/rendering/proxy_box.Dart:1143:11) flutter: #40 RenderObject.layout (package:flutter/src/rendering/object.Dart:1570:7) flutter: #41
_RenderProxyBox&RenderBox&RenderObjectWithChildMixin&RenderProxyBoxMixin.performLayout (package:flutter/src/rendering/proxy_box.Dart:109:13) flutter: #42 RenderObject.layout (package:flutter/src/rendering/object.Dart:1570:7) flutter: #43
_RenderProxyBox&RenderBox&RenderObjectWithChildMixin&RenderProxyBoxMixin.performLayout (package:flutter/src/rendering/proxy_box.Dart:109:13) flutter: #44 RenderObject.layout (package:flutter/src/rendering/object.Dart:1570:7) flutter: #45
_RenderProxyBox&RenderBox&RenderObjectWithChildMixin&RenderProxyBoxMixin.performLayout (package:flutter/src/rendering/proxy_box.Dart:109:13) flutter: #46 RenderObject.layout (package:flutter/src/rendering/object.Dart:1570:7) flutter: #47 RenderStack.performLayout (package:flutter/src/rendering/stack.Dart:520:15) flutter: #48 RenderObject.layout (package:flutter/src/rendering/object.Dart:1570:7) flutter: #49
_RenderProxyBox&RenderBox&RenderObjectWithChildMixin&RenderProxyBoxMixin.performLayout (package:flutter/src/rendering/proxy_box.Dart:109:13) flutter: #50 RenderObject.layout (package:flutter/src/rendering/object.Dart:1570:7) flutter: #51
_RenderProxyBox&RenderBox&RenderObjectWithChildMixin&RenderProxyBoxMixin.performLayout (package:flutter/src/rendering/proxy_box.Dart:109:13) flutter: #52 RenderObject.layout (package:flutter/src/rendering/object.Dart:1570:7) flutter: #53
_RenderProxyBox&RenderBox&RenderObjectWithChildMixin&RenderProxyBoxMixin.performLayout (package:flutter/src/rendering/proxy_box.Dart:109:13) flutter: #54 RenderObject.layout (package:flutter/src/rendering/object.Dart:1570:7) flutter: #55
_RenderProxyBox&RenderBox&RenderObjectWithChildMixin&RenderProxyBoxMixin.performLayout (package:flutter/src/rendering/proxy_box.Dart:109:13) flutter: #56 RenderObject.layout (package:flutter/src/rendering/object.Dart:1570:7) flutter: #57
_RenderProxyBox&RenderBox&RenderObjectWithChildMixin&RenderProxyBoxMixin.performLayout (package:flutter/src/rendering/proxy_box.Dart:109:13) flutter: #58 RenderObject.layout (package:flutter/src/rendering/object.Dart:1570:7) flutter: #59
_RenderProxyBox&RenderBox&RenderObjectWithChildMixin&RenderProxyBoxMixin.performLayout (package:flutter/src/rendering/proxy_box.Dart:109:13) flutter: #60 RenderOffstage.performLayout (package:flutter/src/rendering/proxy_box.Dart:2809:13) flutter: #61 RenderObject.layout (package:flutter/src/rendering/object.Dart:1570:7) flutter: #62 RenderStack.performLayout (package:flutter/src/rendering/stack.Dart:520:15) flutter: #63 RenderObject.layout (package:flutter/src/rendering/object.Dart:1570:7) flutter: #64
__RenderTheatre&RenderBox&RenderObjectWithChildMixin&RenderProxyBoxMixin.performLayout (package:flutter/src/rendering/proxy_box.Dart:109:13) flutter: #65 RenderObject.layout (package:flutter/src/rendering/object.Dart:1570:7) flutter: #66
_RenderProxyBox&RenderBox&RenderObjectWithChildMixin&RenderProxyBoxMixin.performLayout (package:flutter/src/rendering/proxy_box.Dart:109:13) flutter: #67 RenderObject.layout (package:flutter/src/rendering/object.Dart:1570:7) flutter: #68
_RenderProxyBox&RenderBox&RenderObjectWithChildMixin&RenderProxyBoxMixin.performLayout (package:flutter/src/rendering/proxy_box.Dart:109:13) flutter: #69 RenderObject.layout (package:flutter/src/rendering/object.Dart:1570:7) flutter: #70
_RenderProxyBox&RenderBox&RenderObjectWithChildMixin&RenderProxyBoxMixin.performLayout (package:flutter/src/rendering/proxy_box.Dart:109:13) flutter: #71 RenderObject.layout (package:flutter/src/rendering/object.Dart:1570:7) flutter: #72
_RenderProxyBox&RenderBox&RenderObjectWithChildMixin&RenderProxyBoxMixin.performLayout (package:flutter/src/rendering/proxy_box.Dart:109:13) flutter: #73 RenderObject.layout (package:flutter/src/rendering/object.Dart:1570:7) flutter: #74
_RenderProxyBox&RenderBox&RenderObjectWithChildMixin&RenderProxyBoxMixin.performLayout (package:flutter/src/rendering/proxy_box.Dart:109:13) flutter: #75 RenderObject.layout (package:flutter/src/rendering/object.Dart:1570:7) flutter: #76 RenderView.performLayout (package:flutter/src/rendering/view.Dart:125:13) flutter: #77 RenderObject._layoutWithoutResize (package:flutter/src/rendering/object.Dart:1445:7) flutter: #78 PipelineOwner.flushLayout (package:flutter/src/rendering/object.Dart:709:18) flutter: #79
_WidgetsFlutterBinding&BindingBase&GestureBinding&ServicesBinding&SchedulerBinding&PaintingBinding&RendererBinding.drawFrame (package:flutter/src/rendering/binding.Dart:270:19) flutter: #80
_WidgetsFlutterBinding&BindingBase&GestureBinding&ServicesBinding&SchedulerBinding&PaintingBinding&RendererBinding&WidgetsBinding.drawFrame (package:flutter/src/widgets/binding.Dart:627:13) flutter: #81
_WidgetsFlutterBinding&BindingBase&GestureBinding&ServicesBinding&SchedulerBinding&PaintingBinding&RendererBinding._handlePersistentFrameCallback (package:flutter/src/rendering/binding.Dart:208:5) flutter: #82
_WidgetsFlutterBinding&BindingBase&GestureBinding&ServicesBinding&SchedulerBinding._invokeFrameCallback (package:flutter/src/scheduler/binding.Dart:990:15) flutter: #83
_WidgetsFlutterBinding&BindingBase&GestureBinding&ServicesBinding&SchedulerBinding.handleDrawFrame (package:flutter/src/scheduler/binding.Dart:930:9) flutter: #84
_WidgetsFlutterBinding&BindingBase&GestureBinding&ServicesBinding&SchedulerBinding.scheduleWarmUpFrame.<anonymous closure> (package:flutter/src/scheduler/binding.Dart:751:7) flutter:
#86 _Timer._runTimers (Dart:isolate/runtime/libtimer_impl.Dart:382:19) flutter: #87
_Timer._handleMessage (Dart:isolate/runtime/libtimer_impl.Dart:416:5) flutter: #88 _RawReceivePortImpl._handleMessage (Dart:isolate/runtime/libisolate_patch.Dart:165:12) flutter: (elided one frame from package Dart:async) flutter: flutter: The following RenderObject was being processed when the exception was fired: flutter: RenderViewport#c5015 NEEDS-LAYOUT NEEDS-Paint flutter: creator: Viewport ← _ScrollableScope ← IgnorePointer-[GlobalKey#58446] ← Semantics ← Listener ← flutter: _GestureSemantics ← RawGestureDetector-[LabeledGlobalKey<RawGestureDetectorState>#efcf9] ← flutter: _ExcludableScrollSemantics-[GlobalKey#1ff3b] ← Scrollable ← ListView ← Column ← Padding ← ⋯ flutter: parentData: <none> (can use size) flutter: constraints: BoxConstraints(0.0<=w<=335.0,
0.0<=h<=Infinity) flutter: size: MISSING flutter: axisDirection: down flutter: crossAxisDirection: right flutter: offset: ScrollPositionWithSingleContext#05c53(offset: 0.0, range: null..null, viewport: null, flutter: ScrollableState, AlwaysScrollableScrollPhysics -> BouncingScrollPhysics, IdleScrollActivity#31dab, flutter: ScrollDirection.idle) flutter: anchor: 0.0 flutter: This RenderObject had the following descendants (showing up to depth 5): flutter: RenderSliverPadding#912f7 NEEDS-LAYOUT NEEDS-Paint flutter: RenderSliverList#41182 NEEDS-LAYOUT NEEDS-Paint flutter: RenderRepaintBoundary#8a6de NEEDS-LAYOUT NEEDS-Paint flutter: RenderConstrainedBox#4bfc3 NEEDS-LAYOUT NEEDS-Paint flutter:
_RenderExcludableScrollSemantics#0976e NEEDS-LAYOUT NEEDS-Paint flutter: ════════════════════════════════════════════════════════════════════════════════════════════════════ flutter: Another exception was thrown: RenderBox was not laid out: RenderViewport#c5015 NEEDS-LAYOUT NEEDS-Paint flutter: Another exception was thrown: RenderBox was not laid out: RenderViewport#c5015 NEEDS-Paint flutter: Another exception was thrown: RenderBox was not laid out: RenderIgnorePointer#a987c relayoutBoundary=up14 NEEDS-Paint flutter: Another exception was thrown: RenderBox was not laid out: RenderSemanticsAnnotations#9bd09 relayoutBoundary=up13 NEEDS-Paint flutter: Another exception was thrown: RenderBox was not laid out: RenderPointerListener#12af7 relayoutBoundary=up12 NEEDS-Paint Reloaded 1 of 493 libraries in 603ms. flutter: Another exception was thrown: RenderBox was not laid out: RenderSemanticsGestureHandler#27e1a relayoutBoundary=up11 NEEDS-Paint flutter: Another exception was thrown: RenderBox was not laid out:
_RenderExcludableScrollSemantics#85fc5 relayoutBoundary=up10 NEEDS-Paint flutter: Another exception was thrown: RenderBox was not laid out: RenderFlex#19bee relayoutBoundary=up9 NEEDS-Paint flutter: Another exception was thrown: RenderBox was not laid out: RenderPadding#e802a relayoutBoundary=up8 NEEDS-Paint flutter: Another exception was thrown: RenderBox was not laid out:
_RenderSingleChildViewport#5d1aa relayoutBoundary=up7 NEEDS-Paint flutter: Another exception was thrown: RenderBox was not laid out: RenderIgnorePointer#f73b8 relayoutBoundary=up6 NEEDS-Paint flutter: Another exception was thrown: RenderBox was not laid out: RenderSemanticsAnnotations#610b2 relayoutBoundary=up5 NEEDS-Paint flutter: Another exception was thrown: RenderBox was not laid out: RenderPointerListener#cbdf9 relayoutBoundary=up4 NEEDS-Paint flutter: Another exception was thrown: RenderBox was not laid out: RenderSemanticsGestureHandler#37577 relayoutBoundary=up3 NEEDS-Paint flutter: Another exception was thrown: 'package:flutter/src/rendering/shifted_box.Dart': Failed assertion: line 310 pos 12: 'child.hasSize': is not true. flutter: Another exception was thrown: RenderBox was not laid out:
_RenderSingleChildViewport#5d1aa relayoutBoundary=up7 NEEDS-P
Résumé du médecin (pour voir tous les détails, lancez flutter doctor -v):
[✓] Flutter (Chaîne bêta, v0.4.4, sur Mac OS X 10.13.1 17B1003, locale en-HK)
[✓] Chaîne d'outils Android - développer pour les appareils Android (Android SDK 26.0.2)
[✓] Chaîne d'outils iOS - développer pour les appareils iOS (Xcode 9.2)
[✓] Android Studio (version 3.1)
[✓] Appareils connectés (3 disponibles)
Essayez ce code,
Vous pouvez implémenter une ligne défilante dans le flutter en utilisant le code ci-dessous
et pour la colonne qui défile, il suffit de changer "Row" avec "Column"
new SingleChildScrollView(
scrollDirection: Axis.horizontal,
child: new Row(
children: <Widget>[
new Text('hi'),
new Text('hi'),
new Text('hi'),
]
)
)
Vous pouvez utiliser le widget Expanded pour emballer votre listView. Le widget Expanded indique à l'écran de laisser autant d'espace qu'il le souhaite.
Vous pouvez également écrire shrinkWrap:true dans votre widget ListView (fonctionne dans de nombreux cas).
Une ListView horizontale s’agrandira verticalement pour occuper la hauteur de son parent. Il se trouve que dans ce cas, le parent est une ListView verticale, qui a une hauteur infinie. Vous devez limiter la hauteur de votre ListView intérieure.
La manière la plus simple de le faire est probablement d'utiliser un widget SizedBox .
ListView(
children: [
SizedBox(
height: 300.0,
child: ListView(scrollDirection: Axis.horizontal, ...),
),
],
)
MODIFIER:
Le problème est en fait causé par la variable verticale ListView, car il s'agit de l'enfant d'un Column. La raison est similaire à celle ci-dessus, une ListView s'agrandira pour devenir la hauteur de son parent et une Column aura une hauteur illimitée.
Cet extrait affiche le symptôme.
Column(
children: <Widget>[
ListView(children: [Text("hi"), Text("hi"), Text("hi")]),
],
)
La solution dans ce cas dépend de votre configuration. Vous pouvez à nouveau envelopper une SizedBox. Vous pouvez inclure les éléments de colonne dans votre ListView. Ou vous pouvez aussi changer la ListView pour une Column.
La raison en est que vous ne pouvez pas utiliser une liste dans une liste, alors vous devez en faire une colonne ou une ligne, selon les besoins.
new Listview(
children: <Widget>[
new SizedBox(
height:100.0,
child: new Row(
children: <Widget>[
new Text("hi"),
new Text("hi"),
new Text("hi"),
]
)
)
]
)
Cela satisferait vos exigences selon moi.
Enveloppez le 'ListView' avec un widget 'Développé'.
new Expanded (
child: new ListView (
.....
)
)
Vous devrez insérer votre ListView horizontal dans le widget SizedBox. Regardez cet exemple de code:
new SizedBox(
height: 72.0,
child: new ListView(
padding: const EdgeInsets.symmetric(vertical: 4.0),
children: listViewItems,
scrollDirection: Axis.horizontal,
),
),
Cela peut sembler une réponse paresseuse, mais avez-vous essayé de faire un $ flutter clean?
Lorsque je lance ceci en utilisant le standard standard donné lorsque vous ouvrez un nouveau projet Flutter, il fonctionne parfaitement, en utilisant le même code que celui qui vous a donné des problèmes.
Je sais que c'est une question plus ancienne, mais j'espère que quelqu'un trouvera cela utile.
C'est ce que j'ai utilisé;
import 'package:flutter/material.Dart';
void main() => runApp(new MyApp());
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return new MaterialApp(
title: 'Flutter Demo',
theme: new ThemeData(
primarySwatch: Colors.blue,
),
home: new MyHomePage(title: 'Flutter Demo Home Page'),
);
}
}
class MyHomePage extends StatefulWidget {
MyHomePage({Key key, this.title}) : super(key: key);
final String title;
@override
_MyHomePageState createState() => new _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
@override
Widget build(BuildContext context) {
return new Scaffold(
appBar: new AppBar(
title: new Text(widget.title),
),
body:
_listView(),
);
}
ListView _listView() {
return new ListView(
children: [
new SizedBox(
height: 100.0,
child: ListView(
scrollDirection: Axis.horizontal,
children: <Widget>[
new Text("hi"),
new Text("hi"),
new Text("hi"),
],
),
),
],
);
}
}
Et c'est ce que j'ai eu;
