我正在尝试以一种UI方式,使一行中的按钮数量根据可用信息而变化。更具体地说,将始终有一个FlatButton
链接到外部页面的链接,但是如果还提供了下载链接,则FlatButton
该行中将有第二个链接。
在当前存在的网站上,我们只能使用一个按钮而不是两个按钮,但是我无法让一个按钮水平扩展以填充可用空间。
此刻,我将FlatButton
s添加到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
],
)
),
);
用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] 删除。
我来说两句