如何在Flutter行内的列中使用Container填充空间？

Ken 发表于 Dev

ken

以下是我在Flutter中的代码。

class MyListPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Colors.white,
      body: _ListView(),
    );
  }
}

class _ListView extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return ListView.builder(
        itemCount: 1,
        itemBuilder: (_, index) {
          return MyTile();
        }
    );
  }
}

class MyTile extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Container(
      height: 100,
      color: Colors.red,
      child: Row(
        children: [
          Column(
            children: [
              Text("AAA"),
              SizedBox(height: 10,),
              Text("BBB"),
              SizedBox(height: 10,),
              Text("CCC\nDDD"),
              SizedBox(height: 10,),
            ],
          ),
          Column(
            children: [
              Text("aaaa"),
              Expanded(
                child: Container(
                  color: Colors.blue,
                  width: 20,
                ),
              ),
            ],
          ),
        ]
      ),
    );
  }
}

输出为以下图像。

但这不是我想要画的。我希望蓝色容器小部件可以像下面的图像一样填充多余的空间。黄色文字是我的补充评论。

然后，我更改width: 20,为width: double.infinity，但是导致构建错误。

======== Exception caught by rendering library =====================================================
The following assertion was thrown during performLayout():
BoxConstraints forces an infinite width.

我该如何解决这个问题？

=======

[其他评论]

我已经删除了width如下属性。

          Column(
            children: [
              Text("aaaa"),
              Expanded(
                child: Container(
                  color: Colors.blue,
                ),
              ),
            ],
          ),

然后，蓝色容器被完全隐藏。宽度大概为零...

蒂埃里

您应该扩展第二列并使用拉伸横轴对齐方式：

class MyTile extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Container(
      height: 100,
      color: Colors.red,
      child: Row(children: [
        Column(
          children: [
            Text("AAA"),
            SizedBox(
              height: 10,
            ),
            Text("BBB"),
            SizedBox(
              height: 10,
            ),
            Text("CCC\nDDD"),
            SizedBox(
              height: 10,
            ),
          ],
        ),
        Expanded(
          child: Column(
            crossAxisAlignment: CrossAxisAlignment.stretch,
            children: [
              Text("aaaa"),
              Expanded(
                child: Container(
                  color: Colors.blue,
                  width: 20,
                ),
              ),
            ],
          ),
        ),
      ]),
    );
  }
}