Flutter - FlatButton 填充可用水平空间答案

【问题标题】：Flutter - FlatButton Fill available horizontal spaceFlutter - FlatButton 填充可用水平空间
【发布时间】：2020-06-10 19:30:54
【问题描述】：

我正在尝试以这样一种方式创建一个 UI，即一行中的按钮数量会根据可用信息而变化。更具体地说，总会有一个FlatButton 链接到外部页面，但如果还提供了下载链接，那么行中还会有第二个FlatButton。

在当前存在的网站上，我们为 one button 和 two buttons 工作，但我无法让一个按钮水平扩展以填充可用空间。

目前，我将FlatButtons 添加到List<Widget> 变量中，我将其作为子项传递给一行。我已经尝试使用Flex -> Expanded、SizedBox.expand、CrossAxisAlignment.stretch 以及到目前为止我在此站点上找到的每个解决方案来扩展它，但是我尝试过的每个解决方案都导致forced infinite width 或unbounded width 或non-zero flex but incoming width constraints are unbounded.

这是我目前在 build 方法中的代码：

List<Widget> fullTextDownloadBtns = new List();
if (this.fullArticleUrl != null && this.fullArticleUrl.isNotEmpty) {
  fullTextDownloadBtns.add(
    FlatButton(
      color: Color(0x66629c44),
      onPressed: _openFullArticle,
      child: Text(
        "Full Article",
        style: TextStyle(color: Color(0xff629c44)),
      ),
    )
  );
}

if (this.downloadUrl != null && this.downloadUrl.isNotEmpty) {
  fullTextDownloadBtns.add(
    FlatButton(
      color: Color(0x664d69b1),
      onPressed: _download,
      child: Text(
        "Download",
        style: TextStyle(color: Color(0xff4d69b1)),
      ),
    )
  );
}

return Scaffold(
    appBar: AppBar(
      backgroundColor: Color(0xff0096b0)
    ),
    body: SingleChildScrollView(
      scrollDirection: Axis.vertical,
      child: Column(
        crossAxisAlignment: CrossAxisAlignment.stretch,
        children: [
          // ...related image, title

          Container(
            padding: EdgeInsets.all(15.0),
            child: Row(
              mainAxisAlignment: MainAxisAlignment.spaceEvenly,
              children: fullTextDownloadBtns,
            ),
          ), // Read full article & download PDF

          // ... Authors, excerpt/description, like/share buttons, comments
        ],
      )
    ),
  );

【问题讨论】：

标签： flutter button width

【解决方案1】：

我只是想补充一点，您可以使用 'side: BorderSide(color: Colors.black54, width: 2.2)' 中的 'width' 属性来调整按钮边框的宽度。

Row(
  children: <Widget>[
    Expanded(
      child: FlatButton(
        onPressed: () {},
        shape: RoundedRectangleBorder(
            borderRadius: BorderRadius.circular(5.0),
             side: BorderSide(color: Colors.black54, width: 2.2),
        ),
        color: Colors.white,
        child: (Text('BUTTON NAME')),
      ),
    ),
  ],
),

在这里找了半天没找到修改边框轮廓宽度的方法。所以想我可以在这里添加它。也许将来可以帮助像我这样的其他菜鸟。

【讨论】：

【解决方案2】：

用 Expanded 包裹你的按钮是这里的方法（我用你的代码试过）：

Row(
  children: [
    Expanded(
      child: FlatButton(onPressed: (){},
        child: Text("1")),
    ),
    Expanded(
      child: FlatButton(onPressed: (){},
        child: Text("2")),
    )
  ],
),

顺便说一句，由于 SDK 2.2.2（在您的 pubspec.yaml 中），您可以使用子列表中的条件：

children: [
  if(true == true)
  FlatButton(
    onPressed: (){},
    child: Text("1")),
],

【讨论】：

这绝对完美。我尝试将Expanded 元素添加到List，但由于某种原因导致unbounded width 错误。非常感谢！

【解决方案3】：

您可以使用 Row 小部件并使用它们的子组件为 FlatButton 的两个 Expanded 小部件。分别实现它们的条件……例如：

Row(
children:[
trueCondition ? Expanded(
child: FlatButton()
) : SizedBox()
]
)

【讨论】：