如何在 Flutter 中為 Container Widget 下划線

Question

我試圖在我的 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)),
      ),

但現在我希望下划線不是從頭到尾，我想在開頭和結尾都有空間。 如果有一些更聰明的方法來強調小部件，我也會很高興看到它。

Answer 1

將底部BorderSide添加到您的容器中。

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

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

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

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

Answer 5

使用這個const Divider(color: Colors.black54),