实现嵌套ListView(或者换句话说,可以包含在可滚动父控件中的ListView Widget)的首选方法是什么?想象一个“报告”页面,其中的一个部分是一个逐项列出的列表。
ymzxtsji1#
对于子ListView,请使用该参数:
shrinkWrap: true, physics: ClampingScrollPhysics(),
xzabzqsa2#
添加physics: ClampingScrollPhysics()和shrinkWrap: true对我来说很有用。
physics: ClampingScrollPhysics()
shrinkWrap: true
样本代码:
@override Widget build(BuildContext context) { return Container( child: Column( mainAxisSize: MainAxisSize.min, children: <Widget>[ Expanded( child: ListView.builder( shrinkWrap: true, itemCount: 123, itemBuilder: (BuildContext context, int index) { return Column( crossAxisAlignment: CrossAxisAlignment.start, children: <Widget>[ Text('Parent'), ListView.builder( itemCount: 2, physics: ClampingScrollPhysics(), shrinkWrap: true, itemBuilder: (BuildContext context, int index) { return Text('Child'); }), ], ); }), ) ], ), ); }
6gpjuf903#
如果希望内部ListView可以独立于主滚动视图滚动,则应使用NestedScrollView。否则,请使用CustomScrollView。下面是说明NestedScrollView方法的一些代码。
NestedScrollView
CustomScrollView
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(), ); } } class MyHomePage extends StatelessWidget { @override Widget build(BuildContext context) { return new Scaffold( body: new NestedScrollView( headerSliverBuilder: (BuildContext context, bool innerBoxIsScrolled) { return <Widget>[ new SliverAppBar( pinned: true, title: new Text('Flutter Demo'), ), ]; }, body: new Column( children: <Widget>[ new FlutterLogo(size: 100.0, colors: Colors.purple), new Container( height: 300.0, child: new ListView.builder( itemCount: 60, itemBuilder: (BuildContext context, int index) { return new Text('Item $index'); }, ), ), new FlutterLogo(size: 100.0, colors: Colors.orange), ], ), ), ); } }
0tdrvxhp4#
屏幕截图:
代码:
var _container = Container( height: 200, color: Colors.blue, margin: EdgeInsets.symmetric(vertical: 10), ); @override Widget build(BuildContext context) { return Scaffold( appBar: AppBar(title: Text("ListView")), body: Padding( padding: const EdgeInsets.all(40.0), child: ListView( // parent ListView children: <Widget>[ _container, _container, Container( height: 200, // give it a fixed height constraint color: Colors.teal, // child ListView child: ListView.builder(itemBuilder: (_, i) => ListTile(title: Text("Item ${i}"))), ), _container, _container, _container, ], ), ), ); }
ryoqjall5#
对于内部列表视图,我刚刚添加了下面的代码,它为我解决了
shrinkWrap: true, physics: ScrollPhysics(),
q8l4jmvw6#
感谢塞尔达尔Polat:
ListView.builder( // outer ListView itemCount: 4, itemBuilder: (_, index) { return Column( children: [ Container( color: Colors.blue, alignment: Alignment.center, child: Text('Header $index'), ), ListView.builder( // inner ListView shrinkWrap: true, // 1st add physics: ClampingScrollPhysics(), // 2nd add itemCount: 10, itemBuilder: (_, index) => ListTile(title: Text('Item $index')), ) ], ); }, )
huus2vyu7#
我用这个:
scrollController.addListener(onScroll); void onScroll(){ if(scrollController.offset == 0.0 || scrollController.position.extentBefore == 0.0 || scrollController.position.extentAfter == 0.0){ scrollPhysics = NeverScrollableScrollPhysics(); Future.delayed(Duration(seconds: 1), (){ scrollPhysics = ClampingScrollPhysics(); setState((){}); }); setState((){});; } }
8ftvxx2r8#
Expanded( child: ListView.builder( shrinkWrap: true, padding: const EdgeInsets.all(8), itemCount: requestList.length, itemBuilder: (BuildContext context, int index) { int que = index; return Column( crossAxisAlignment: CrossAxisAlignment.start, children: <Widget>[ Container( padding: const EdgeInsets.only( left: 20, top: 10, bottom: 10, right: 20), child: Text( '${que++} . ${requestList[index].question}', textAlign: TextAlign.center, style: TextStyle( fontSize: 14, color: HexColor(HexColor.black), fontFamily: 'montserrat_regular', decoration: TextDecoration.none, ), )), ListView.builder( itemCount: requestList[index].questionOptions!.length, physics: ClampingScrollPhysics(), shrinkWrap: true, itemBuilder: (BuildContext context, int subindex) { return Row( children: <Widget>[ Radio( value: 1, groupValue: radio_value[index], onChanged: (values) async { setState(() { radio_value[index] = 1; qutionCheckModel[index].response = "yes"; }); }), Container( child: Text( requestList[index].questionOptions![subindex], textAlign: TextAlign.center, style: TextStyle( fontSize: 14, color: HexColor(HexColor.black), fontFamily: 'montserrat_regular', decoration: TextDecoration.none, ), ), ), ], ); }), ], ); }), ),
mzsu5hc09#
使用shrinkWrap Package 内容,使用ClampingScrollPhysics使用父滚动条
ListView.builder( shrinkWrap: true, physics: const ClampingScrollPhysics(), itemCount: yourList.length, itemBuilder: (context, index) => YourWidget(items[index]), ),
9条答案
按热度按时间ymzxtsji1#
对于子ListView,请使用该参数:
xzabzqsa2#
添加
physics: ClampingScrollPhysics()
和shrinkWrap: true
对我来说很有用。样本代码:
6gpjuf903#
如果希望内部ListView可以独立于主滚动视图滚动,则应使用
NestedScrollView
。否则,请使用CustomScrollView
。下面是说明
NestedScrollView
方法的一些代码。0tdrvxhp4#
屏幕截图:
代码:
ryoqjall5#
对于内部列表视图,我刚刚添加了下面的代码,它为我解决了
q8l4jmvw6#
感谢塞尔达尔Polat:
huus2vyu7#
我用这个:
8ftvxx2r8#
mzsu5hc09#
使用shrinkWrap Package 内容,使用ClampingScrollPhysics使用父滚动条