如何解决Flutter:使按钮拉伸
我正在构建的 Flutter Widget 树有问题:
我希望底部的按钮更大,并填充从上方文本到屏幕底部的所有可用空间。
这是我当前的代码:
class Body extends StatelessWidget {
@override
Widget build(BuildContext context) {
Size size = MediaQuery.of(context).size;
return SafeArea(
child: Column(
children: [
UpperDetailsContainer(),TitleAndPrice(),//The Row below contains the Two Buttons
Expanded(
child: Row(
children: [
Container(
width: size.width / 2,child: TextButton(
child: Text("Buy Now"),style: TextButton.styleFrom(
backgroundColor: kPrimaryColor,shape: RoundedRectangleBorder(
borderRadius: BorderRadius.only(
topRight: Radius.circular(50)
)
)
),),Container(
width: size.width / 2,child: TextButton(
child: Text("Description"),style: TextButton.styleFrom(
backgroundColor: kPrimaryColor,shape: RoundedRectangleBorder(
borderRadius: BorderRadius.only(
topLeft: Radius.circular(50)
)
)
),],)
],);
}
}
我已经试过了:
- 使上部小部件变小
- 将 Mainaxisaligment.spacebetween 添加到周围的列
- 将 Crossaxisaligment.stretch 添加到包含按钮的行
- 整体移除 SafeArea 底部/SafeArea
- 手动将按钮的高度设置为绝对值,但出于明显的原因,我真的不想这样做
我还能做什么?那个灰色底部条纹是从哪里来的?
解决方法
将 builder: (ctx,model,snapshot) {
if(model.forceLeave == true) {
exitFullScreen() // <-- Do something like this ?
return Text("Your time is up")
}
return WebViewWithAHtmlPlayer()
}
添加到行中,使其填充所有可用的垂直空间
注意:您需要 crossAxisAlignment: CrossAxisAlignment.stretch
小部件,以便您的行获得的约束不是无限的
Expanded
可运行示例:https://www.dartpad.dev/4f568d8e0a334d23e7211207081356b4?null_safety=true
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。