flutter 展开Widget以填满ListView中的剩馀空间

92dk7w1h  于 2022-11-17  发布在  Flutter
关注(0)|答案(4)|浏览(320)

如上图所示,我希望小部件2的高度始终至少为剩余可用空间的高度。
但是widget 2可能包含了太多的ListTiles,如果不滚动的话就无法显示它们。但是滚动应该会影响widget 1和widget 2。什么是实现这样的东西的最好方法?

x0fgdtte

x0fgdtte1#

Widget 2 Package 在Expanded小部件中。
要同时滚动Widget 1Widget 2,请将它们都 Package 在SingleChildScrollView Widget中。

edqdpe6u

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,
      );
    }
  }
2admgd59

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"),
      ),
    ],
  ),
);

希望这对你有帮助!

kxeu7u2r

kxeu7u2r4#

var widgetHeight = MediaQuery.of(context).size.height - fixedSize;

return SingleChildScrollView(
  child: Container(
    height: widgetHeight,
    child: Widget2
  )
)

相关问题