Flutter-FlatButton填充可用的水平空间

马特·克里斯

我正在尝试以一种UI方式,使一行中的按钮数量根据可用信息而变化。更具体地说,将始终有一个FlatButton链接到外部页面的链接,但是如果还提供了下载链接,则FlatButton该行中将有第二个链接

在当前存在的网站上,我们只能使用一个按钮而不是两个按钮,但是我无法让一个按钮水平扩展以填充可用空间。

此刻,我将FlatButtons添加List<Widget>作为行的子代传递变量中。我已经尝试使用Flex -> ExpandedSizedBox.expandCrossAxisAlignment.stretch和每一个解决方案,我已经在这个网站上发现迄今得到它扩大,但每次我都尝试过解决方案都导致forced infinite widthunbounded widthnon-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
        ],
      )
    ),
  );
米凯尔·赫恩兹(MickaelHrndz)

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

本文收集自互联网,转载请注明来源。

如有侵权,请联系 [email protected] 删除。

编辑于
0

我来说两句

0 条评论
登录 后参与评论

相关文章

填充堆栈中所有可用的水平空间

Flutter FlatButton 内部空间

CSS布局填充了其余的水平空间

如何使div填充剩余的水平空间?

让元素填充剩余的水平空间

如何使div填充剩余的水平空间

WPF:如何让文本框填充所有可用的水平空间?

div何时填充水平空间,何时不填充水平空间?

如何使旋转的图像填充Flutter中的可用空间?

删除Flutter Container> FlatButton中的填充

如何使input [type = text]填充剩余的水平空间?

CSS。三列,外部两个可变宽度,但包裹了它们的内容,中间扩展以填充可用的水平空间

前景中的水平空间

Flutter使TableRow占用剩余的可用空间

使元素占用可用的水平空间而不会使其父元素变宽

uwp列表视图项永远不会覆盖可用的水平空间

如何在flex子代行中填充水平空间?

使用 flex 填充容器内剩余水平空间的正确方法是什么

填充多行 flex 布局中剩余的水平空间(“flex-grow: 1”不起作用)

使div用动态宽度填充父div的剩余水平空间

当浮动元素处于其固定宽度同级之间时,如何使它填充剩余的水平空间?

restructuredText / Sphinx:显式水平空间

tableviewcell中的水平空间约束

减少 TreeView 使用的水平空间

这个多余的水平空间是从哪里来的?

CSS水平空间div表

使用FlatButton Flutter隐藏隐藏

更改Flutter的FlatButton的颜色onPressed

如何在不指定div宽度的情况下使div占据所有可用的剩余水平空间?