Question

我在Flutter应用中使用了这个简单的小部件：

  FlatButton(
   child: Column(
          children: <Widget>[
            Image.asset(assets, height: 40, width: 40),
            Text('Title'),
            //my color line
            Container(
              height: 5,
              width: ?,
              color: Colors.blue[800],
            )
          ],
        )
  )

我需要色线（在臀部），宽度与父级匹配。但我不知道该怎么做。

Answer 1

两种方法

约束框：

它创建一个在其子项上施加其他约束的窗口小部件，该窗口小部件内部使用SingleChildRenderObjectWidget在该子窗口小部件上添加约束。

ConstrainedBox(
        constraints:
            const BoxConstraints(minWidth: double.infinity, maxHeight: 10),
        child: Container(
          color: Colors.blue,
        ),
      ),

SizedBox：

SizedBox只是创建一个具有给定宽度/高度的框，并且不允许子级超出给定尺寸。它还使用SingleChildRenderObjectWidget来确定子渲染区域

SizedBox(
        width: double.infinity,
        height: 5,
        // height: double.infinity,
        child: Container(
          color: Colors.blue,
        ),
      ),

Answer 2

使用IntrinsicWidth

 FlatButton(
   child: IntrinsicWidth(
   child: Column(
          mainAxisSize: MainAxisSize.min,
          crossAxisAlignment: CrossAxisAlignment.stretch,
          children: <Widget>[
            Image.asset(assets, height: 40, width: 40),
            Text('Title'),
            //my color line
            Container(
              height: 5,
              width: ?,
              color: Colors.blue[800],
            )
          ],
        ))
  )

Some cheatsheet

Answer 3

Container(
    height: 5,
    width: double.infinity,
    color: Colors.blue[800],
)

Answer 4

Container中没有子项的

Column将始终展开。如果您确实添加了child，则会对其进行包装。

此外，如果您不限制按钮中的Column，它也会增长到最大可用高度。

我对您的建议是，不要在按钮的“列”中放置一个空的Container，而应将按钮用“容器”包装起来并为其底部边框。这将在底部显示您的彩色线。

Container(
  decoration: BoxDecoration(
    border: Border(
      bottom: BorderSide(width: 5, color: Colors.blue[800]),
    ),
  ),
  child: FlatButton(
    onPressed: () {},
    child: Column(
      mainAxisSize: MainAxisSize.min, // prevent Column to expand full height
      children: <Widget>[
        Icon(Icons.cake, size: 40),
        Text('title'),
      ],
    ),
  ),
),

Flutter-如何创建宽度与父级匹配的容器？

4 个答案: