Flutter

Question

我试图让 UI 行中的按钮数量根据可用信息而变化。更具体地说，总会有一个 FlatButton link 到外部页面，但是如果还提供了下载 link，那么就会有第二个 FlatButton该行。

在当前存在的网站上，我们为 one button versus two buttons 提供了此功能，但我无法使用一个按钮来水平扩展以填充可用的 space。

目前，我将 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
        ],
      )
    ),
  );

Answer 1

您可以使用一个 Row 小部件并使用两个 Expanded 小部件，它们的子部件是 FlatButton.implement 它们的条件分别如下：

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

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

Answer 3

我只是想补充一点，您可以使用 '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')),
      ),
    ),
  ],
),

在这里很久没找到更改边框轮廓宽度的方法。所以我想我可以在这里添加它。也许以后可以帮助像我这样的新手。

Flutter - FlatButton Fill 水平可用 space

Flutter - FlatButton Fill available horizontal space

button

width