在颤动中用颜色填充区域

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等于height，因为它是列表中最大的元素。所以56.0，考虑到你只有一行标题，没有dense属性。

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

​

​