flutter - 在 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 crossAxisAlignment 设置为CrossAxisAlignment.stretch。这将迫使它的所有 child 垂直扩展。但是你必须添加一个高度限制，否则该行将在垂直轴上扩展。

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

然后您可能希望在彩色容器内对齐您的文本。因为它是顶部对齐而不是垂直居中。这可以通过将 Container 上的 alignment 属性设置为 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),
                ),
            ),
          ],
        ),
      ),
    ),
  ),
)