如上图所示,我希望小部件2的高度始终至少为剩余可用空间的高度。但是widget 2可能包含了太多的ListTiles,如果不滚动的话就无法显示它们。但是滚动应该会影响widget 1和widget 2。什么是实现这样的东西的最好方法?
x0fgdtte1#
将Widget 2 Package 在Expanded小部件中。要同时滚动Widget 1和Widget 2,请将它们都 Package 在SingleChildScrollView Widget中。
Widget 2
Expanded
Widget 1
SingleChildScrollView
edqdpe6u2#
如果您可以区分元素数少和元素数多的情况(例如在载入时),您可以使用CustomScrollView搭配SliverFillRemaining来执行此动作:
var _isLoading = true; @override Widget build(BuildContext context) { return CustomScrollView( slivers: [ _buildWidget1(), _buildWidget2(), ], ); } Widget _buildWidget1() { return SliverToBoxAdapter( child: Container(height: 400, color: Colors.blue), ); } Widget _buildWidget2() { if(_isLoading) { return SliverFillRemaining( hasScrollBody: false, child: Center(child: const CircularProgressIndicator()), ); } else { return SliverFixedExtentList( delegate: SliverChildBuilderDelegate( _buildItem, childCount: childCount, ), itemExtent: 56, ); } }
2admgd593#
一个简单的方法就是把你的小部件放在Column中,然后用一个子滚动视图来 Package 它。以下是一个示例
SingleChildScrollView( child: Column( children: [ Container( height: MediaQuery.of(context).size.height / 2, color: Colors.red, ), ListView.builder( shrinkWrap:true, physics:NeverScrollableScrollPhysics(), itemCount: 100, itemBuilder: (context, index) => Text("$index"), ), ], ), );
希望这对你有帮助!
kxeu7u2r4#
var widgetHeight = MediaQuery.of(context).size.height - fixedSize; return SingleChildScrollView( child: Container( height: widgetHeight, child: Widget2 ) )
4条答案
按热度按时间x0fgdtte1#
将
Widget 2
Package 在Expanded
小部件中。要同时滚动
Widget 1
和Widget 2
,请将它们都 Package 在SingleChildScrollView
Widget中。edqdpe6u2#
如果您可以区分元素数少和元素数多的情况(例如在载入时),您可以使用CustomScrollView搭配SliverFillRemaining来执行此动作:
2admgd593#
一个简单的方法就是把你的小部件放在Column中,然后用一个子滚动视图来 Package 它。
以下是一个示例
希望这对你有帮助!
kxeu7u2r4#