如何在Flutter中给容器小部件添加下划线

Question

我正在尝试在我的Flutter应用程序中给一个Container下划线。到目前为止，当我使用以下代码时，我实现了某种下划线：

    Container(
        child: Row(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            Expanded(
              child: Padding(
                padding: EdgeInsets.all(8.0),
                child: Text(
                  'Underline my parent!',
                  maxLines: 2,
                  textAlign: TextAlign.center,
                ),
              ),
            )
          ],
        ),
        decoration: Border(bottom: BorderSide(color: Colors.grey)),
      ),

但现在我希望下划线不是从开头到结尾，而是在开头和结尾有空格。如果有更聪明的方法来给小部件加下划线，我也很乐意看到。

- MeLean

Answer 1

在您的容器中添加底部BorderSide。

     Container(
        decoration: BoxDecoration(
           border: Border(
              bottom: BorderSide(width: 1.0, color: Colors.black),
           ),
       ),
    ),

- GraSim

Answer 2

您可以使用一个简单的带有填充的 Divider 小部件来实现分割线：

new Padding(
    padding: EdgeInsets.all(8.0), 
    child: new Divider()
),

您可以将现有的小部件包装在列中：

new Column(
    children: <Widget> [
        yourContainerWidget,
        new Padding(
            padding: EdgeInsets.all(8.0), 
            child: new Divider()
        ),     
    ]
)

- Bostrot

---

好的，但这个Divider应该放在哪里？在Container之后吗？ - MeLean

这是一个相当不错的方法，但我现在无法设置分隔符宽度。 - MeLean

然后尝试去除其周围的填充。 - Bostrot

我的意思是下划线的宽度，现在它是固定像素，我没有看到任何可能使它的宽度为5像素的可能性。 - MeLean

你可以将它放在一个容器中，并使用“width”属性设置宽度。 - Bostrot

Answer 3

您可以使用Border在Container小部件中简单地创建下划线。

以下是代码：

Container(
  padding: EdgeInsets.all(8.0),
  decoration: BoxDecoration(
    border: Border(
      bottom: BorderSide(
        width: 1.0
      ),
    ),
  ),
  child: Text(
    'Underline my parent!',
    maxLines: 2,
    textAlign: TextAlign.center,
  ),
), 

- Miko

Answer 4

一种简单的解决方案是使用Container小部件创建一条线。然后使用Column小部件将Row小部件包装起来，并将该线作为第二个子元素添加，如下所示：

var aLine = Container(color: Colors.grey, width: 50.0, height: 2.0,); 

Column(
  children: <Widget>[
    Row(
        mainAxisAlignment: MainAxisAlignment.center,
        children: <Widget>[
          Expanded(
            child: Padding(
              padding: EdgeInsets.all(8.0),
              child: Text(
                'Underline my parent!',
                maxLines: 2,
                textAlign: TextAlign.center,
              ),
            ),
          ),
        ],
      ),
      aLine
  ],
),

- Blasanka

Answer 5

使用这个 const Divider(color: Colors.black54),

- germain kataku

---

你的回答相比Bostrot所接受的答案，有哪些附加价值呢？ - MeLean