在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。 这将迫使所有孩子垂直扩展。 但是你必须添加一个高度约束，否则该行将在垂直轴上展开。

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

然后，您可能希望将Text与彩色容器对齐。因为它是顶部对齐而不是垂直居中。 根据您的需要，alignment设置为Container或Alignment.center的{​​{1}}属性可以实现这一目标。

Alignment.centerLeft/Right