在Flutter中如何占据柱上的整个可用空间

js4nwp54  于 2023-01-14  发布在  Flutter
关注(0)|答案(3)|浏览(149)

我将用简单的例子来解释,

class Demo1 extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        body: Column(
          children: [
            Flexible(
                child: ListView(
                  shrinkWrap: true,
                  children: const [
              ListTile(
                leading: Icon(Icons.image),
                title: Text('with shrinkwrap is true'),
                trailing: Icon(Icons.delete_forever),
              ),
            ])),
            Expanded(
                child: Container(
              color: Colors.green,
            )),
          ],
        ),
      ),
    );
  }
}

这里的绿色容器没有填充剩余的空间,那么如何填充剩余的区域呢?提前感谢

rjee0c15

rjee0c151#

尝试下面的代码,只是删除您的第一个Flexible小部件

Column(
  children: <Widget>[
    ListView(
      shrinkWrap: true,
      children: const [
        ListTile(
          leading: Icon(Icons.image),
          title: Text('with shrinkwrap is true'),
          trailing: Icon(Icons.delete_forever),
        ),
      ],
    ),
    Expanded(
      child: Container(
        color: Colors.green,
      ),
    ),
  ],
),
baubqpgj

baubqpgj2#

您可以使用SingleChildScrollView,而不是将ListView与shrinkWrap: true一起使用。

class Demo1 extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        body: Column(
          children: [
            SingleChildScrollView(
              child: Column(
                children: const [
                  ListTile(
                    leading: Icon(Icons.image),
                    title: Text('with shrinkwrap is true'),
                    trailing: Icon(Icons.delete_forever),
                  ),
                ],
              ),
            ),
            Expanded(
                child: Container(
              color: Colors.green,
            )),
          ],
        ),
      ),
    );
  }
}

您可能也喜欢CustomScrollView而不是SingleChildScrollViewshrinkWrap:true

vnjpjtjt

vnjpjtjt3#

FlexibleExpanded的flex值都是1,因此它们都请求50%的可用空间,因此ExpandedContainer子进程只占用一半空间,而FlexibleListView子进程也请求一半空间,但需要很少的空间。
您可以通过删除Flexible来使Container填充可用空间,因此 Package ContainerExpanded将获得所有可用空间。

相关问题