代码之家 › 专栏 › 技术社区 › MeLean

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

underline flutter widget

MeLean · 技术社区 · 8 年前

我试图在我的flutter应用程序中的一个容器下划线。到目前为止,我在使用以下代码时实现了某种下划线:

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

但现在我希望下划线不是从头到尾,我希望在开头和结尾都有空间。如果有更聪明的方法来给小部件加下划线,我也很高兴看到它。

2 回复 | 直到 8 年前

Bostrot 8 年前

你可以用一个简单的 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()
        ),     
    ]
)

Blasanka 8 年前

一个简单的解决方案是使用 Container 小装置。并使用列小部件包装行小部件,并将该行作为第二个子级添加,如下所示:

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

推荐文章

Rami Dhouib · Flutter:如果等待时间超过2秒,则执行操作

1 年前

5rod · 如何在three_js(Flutter)中设置缓冲区几何属性?

1 年前