在Flutter中用颜色填充区域 [英] Fill an area with color in Flutter

问题描述

我正在使用Flutter开发应用程序，并且在一行中包含三个项目，我尝试用一​​种颜色填充最后一个项目的区域，但是似乎我刚刚执行的区域周围有填充不是如何摆脱.

I am using Flutter to develop an app and I have a row in a card with three items, I am try to fill the area for the last item with a color but there seems to be padding around the area that I just do not how to get rid of.

这是目前的情况:

这是我的代码:

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),)),
            ],
          ),
        ),
      ),
    );

我要实现的是用蓝色填充整个乐谱.颜色必须延伸到顶部和底部.

All I want to achieve is to fill the entire area with score with the blue color. The color must stretch to the top and bottom.

推荐答案

技巧是将Row crossAxisAlignment设置为CrossAxisAlignment.stretch. 这将迫使所有子项垂直扩展. 但是然后您必须添加一个高度限制，否则该行将在垂直轴上扩展.

The trick is to set on your Row crossAxisAlignment to CrossAxisAlignment.stretch. This will force all it's children to expand vertically. But then you have to add an height constraint or else the row will expand on the vertical axis.

最简单的解决方案是将Row包装成具有固定高度和不受限制宽度的SizedBox.高度等于ListTile高度的位置，因为它是列表中最大的元素.所以56.0，考虑到您只有一行标题，并且没有dense属性.

The easiest solution in your case is to wrap your Row into a SizedBox with a fixed height and unconstrained width. Where the height would be equal to ListTile height, as it's the biggest element of your list. So 56.0, considering you have a one line title and without dense property.

然后，您可能需要将Text对准彩色容器.因为它的顶部对齐而不是垂直居中. 可以根据需要将Container的alignment属性设置为Alignment.center或Alignment.centerLeft/Right来实现.

Then you may want to align your Text inside the colored container. As it's top aligned instead of vertical centered. Which can be achieved with the alignment property on Container set to Alignment.center or Alignment.centerLeft/Right depending on your need.

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),
                ),
            ),
          ],
        ),
      ),
    ),
  ),
)

这篇关于在Flutter中用颜色填充区域的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！