在 Flutter 中用颜色填充区域

Question

我正在使用 Flutter 开发一个应用程序，我在一张卡片中有一排包含三个项目，我尝试用颜色填充最后一个项目的区域，但该区域周围似乎有填充物，我只是不知道如何填充摆脱。

目前的情况是这样的：

这是我的代码：

return new Container(
      margin: const EdgeInsets.symmetric(vertical: 4.0,horizontal: 16.0),
      child: new InkWell(
        child: new Card(
          child: new Row(
            children: <Widget>[
              new Expanded(
                child: new ListTile(
                  leading: new Image.asset("images/${aps.photo}",fit: BoxFit.contain,),
                  title: new Text(aps.university),),

              ),
              new Container(
                  padding: const EdgeInsets.all(10.0),
                  color: Colors.blue,child: new Text("${aps.aps}",style: new TextStyle(color: Colors.white),)),
            ],
          ),
        ),
      ),
    );

我想要实现的就是用蓝色填充整个区域。颜色必须延伸到顶部和底部。

Answer 1

诀窍是设置你的Row crossAxisAlignmentto CrossAxisAlignment.stretch。这将迫使所有它的孩子垂直扩展。但是随后您必须添加高度约束，否则该行将在垂直轴上扩展。

在您的情况下，最简单的解决方案是将您的包装Row成SizedBox具有固定高度和不受约束的宽度。高度等于ListTile高度的地方，因为它是列表中最大的元素。所以 56.0，考虑到你只有一行标题并且没有dense财产。

然后你可能想要对齐你Text的彩色容器。因为它是顶部对齐而不是垂直居中。可与实现alignment财产Container设置为Alignment.center或Alignment.centerLeft/Right根据您的需要。

new Container(
  margin: const EdgeInsets.symmetric(vertical: 4.0, horizontal: 16.0),
  child: new InkWell(
    child: new Card(
      child: new SizedBox(
        height: 56.0,
        child: new Row(
          crossAxisAlignment: CrossAxisAlignment.stretch,
          children: <Widget>[
            new Expanded(
              child: new ListTile(
                title: new Text('foo'),
              ),
            ),
            new Container(
                color: Colors.blue,
                alignment: Alignment.center,
                padding: const EdgeInsets.symmetric(horizontal: 10.0),
                child: new Text(
                  "foo",
                  style: new TextStyle(color: Colors.white),
                ),
            ),
          ],
        ),
      ),
    ),
  ),
)