Flutter 颤振-扁平按钮填充可用水平空间

我正在尝试以这样一种方式创建UI，即一行中的按钮数量根据可用信息的不同而变化。更具体地说，始终会有一个链接到外部页面的

FlatButton

，但如果还提供了下载链接，则行中将有第二个

FlatButton

在目前存在的网站上，我们有一个用于VS的按钮，但我无法通过一个按钮水平扩展来填充可用空间

此时，我将

FlatButton

s添加到一个

列表

变量中，该变量作为行的子变量传递。我尝试过使用

Flex->Expanded

，

SizedBox.Expanded

，

CrossAxisAlignment.stretch

，以及我在这个网站上找到的所有解决方案来扩展它，但我尝试过的每个解决方案都会导致

强制无限宽度

或

无限宽度

或

非零伸缩，但传入的宽度约束是无限的

以下是我在

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

List fullTextDownloadBtns=new List（）；
if（this.fullArticleUrl！=null&&this.fullArticleUrl.isNotEmpty）{
fullTextDownloadBtns.add(
扁平按钮(
颜色：颜色（0x66629c44），
onPressed:_openFullArticle，
子：文本(
“全文”，
样式：TextStyle（颜色：颜色（0xff629c44）），
),
)
);
}
if（this.downloadUrl！=null&&this.downloadUrl.isNotEmpty）{
fullTextDownloadBtns.add(
扁平按钮(
颜色：颜色（0x664d69b1），
onPressed:_下载，
子：文本(
“下载”，
样式：TextStyle（颜色：颜色（0xff4d69b1）），
),
)
);
}
返回脚手架(
appBar:appBar(
背景颜色：颜色（0xff0096b0）
),
正文：SingleChildScrollView(
滚动方向：轴垂直，
子：列(
crossAxisAlignment:crossAxisAlignment.stretch，
儿童：[
//…相关图片、标题
容器(
填充：所有边缘设置（15.0），
孩子：排(
mainAxisAlignment:mainAxisAlignment.space，
儿童：fullTextDownloadBtns，
),
)，//阅读全文并下载PDF
//…作者、摘录/描述、类似/共享按钮、评论
],
)
),
);

您可以使用一个行窗口小部件和两个扩展窗口小部件，它们的子对象是FlatButton。分别为它们实现以下条件：

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

---

使用Expanded包装您的按钮是一种方法（我用您的代码进行了尝试）：

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

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

---

我只想补充一点，您可以通过使用“side:BorderSide（color:Colors.black54，width:2.2）中的“width”属性来调整按钮边框的宽度

行(
儿童：[
扩大(
孩子：扁平按钮(
按下：（）{}，
形状：圆形矩形边框(
边界半径：边界半径。圆形（5.0），
侧面：边框侧面（颜色：Colors.black54，宽度：2.2），
),
颜色：颜色，白色，
子项：（文本（‘按钮名称’），
),
),
],
),

---

在这里很长时间找不到如何更改边框轮廓宽度。所以我想我可以把它加在这里。也许将来能帮助像我这样的人。

这绝对是个好办法。我尝试向

列表中添加
扩展的
元素

，但由于某种原因导致了

无限宽度

错误。非常感谢你！

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

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