如何在 Flutter 中制作方形凸起按钮？
天真
我RaisedButton在 Wrap 中有一大堆s，因此它们可以根据需要占用尽可能多的行。但我确实想将按钮扩展为方形按钮。我可以通过用Wrapa替换GridView.count并使用来做到这一点crossAxisCount，但是当有更多可用空间时，按钮会变得不必要地大。基本上，我希望它们都是相同大小的正方形，大小都与它们所容纳的内容一样大。它们不是动态加载的或任何东西，所以不用担心性能。但是我们正在研究相当小的屏幕的可能性，因此滚动也需要是可能的。有没有办法让所有这些事情都正确？
这是当前代码及其生成的内容：
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text(widget.title),
),
body: Wrap(
direction: Axis.horizontal,
children: <Widget>[
RaisedButton.icon(
onPressed: () {}
label: Text('Park In', style: TextStyle(fontSize: 15.0)),
icon: Icon(Icons.add),
),
RaisedButton.icon(
onPressed: () {}
label: Text('Park Out', style: TextStyle(fontSize: 15.0)),
icon: Icon(Icons.eject),
),
RaisedButton.icon(
onPressed: () {}
label: Text('Maintainence In', style: TextStyle(fontSize: 15.0)),
icon: Icon(Icons.vertical_align_bottom),
),
RaisedButton.icon(
onPressed: () {}
label: Text('Maintainence Out', style: TextStyle(fontSize: 15.0)),
icon: Icon(Icons.vertical_align_top),
),
RaisedButton.icon(
onPressed: null,
label: Text('Move', style: TextStyle(fontSize: 15.0)),
icon: Icon(Icons.open_with),
),
],
),
);
}
用 2 替换 GridView 作为crossAxisCount给出这个，这非常接近我需要的（理想情况下，文本会更大并换行 - 如果没有给定正确的空间，它似乎会溢出，但我想我可以处理它时到此为止）：
但是，例如，当我进入横向模式时，很容易在一行中放置 3 个按钮，GridView 只是“嗯，随便”，并使按钮变得巨大：
斯文
你可以使用一个OrientationBuilder。它将为您处理方向变化：
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text("word"),
),
body: OrientationBuilder(
builder: (context, orientation) {
int count = 2;
if(orientation == Orientation.landscape){
count = 3;
}
return GridView.count(
crossAxisCount: count,
children: <Widget>[
RaisedButton.icon(
onPressed: () {},
label: Text('Park In', style: TextStyle(fontSize: 15.0)),
icon: Icon(Icons.add),
),
RaisedButton.icon(
onPressed: () {},
label: Text('Park Out', style: TextStyle(fontSize: 15.0)),
icon: Icon(Icons.eject),
),
RaisedButton.icon(
onPressed: () {},
label:
Text('Maintainence In', style: TextStyle(fontSize: 15.0)),
icon: Icon(Icons.vertical_align_bottom),
),
RaisedButton.icon(
onPressed: () {},
label:
Text('Maintainence Out', style: TextStyle(fontSize: 15.0)),
icon: Icon(Icons.vertical_align_top),
),
RaisedButton.icon(
onPressed: null,
label: Text('Move', style: TextStyle(fontSize: 15.0)),
icon: Icon(Icons.open_with),
),
],
);
},
),
);
}
本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
编辑于
相关文章
Related 相关文章
- 1
如何在Flutter中制作具有浮雕效果的按钮
- 2
如何在Flutter中制作自定义按钮形状
- 3
如何在Flutter中制作平方的应用栏按钮？
- 4
Flutter：带有凸起按钮中的参数的函数
- 5
如何制作一个android凸起按钮？
- 6
如何在Flutter中制作多雨的动画
- 7
如何在Flutter中制作手势驱动的动画？
- 8
Flutter：如何在Appbar中制作圆形头像
- 9
如何在 Flutter 中制作带价格的图像框
- 10
如何制作方形图像按钮？
- 11
如何在 Flutter 中更改 CupertinoNavigationBar 中后退按钮的颜色
- 12
如何在Flutter中的按钮周围添加阴影？
- 13
如何在Flutter中调整图标/图标按钮的大小？
- 14
如何在Flutter中创建切换按钮？
- 15
如何在Flutter中更改RateMyAppNoButton上的后退按钮
- 16
如何在Flutter中创建Toast？
- 17
如何在Flutter中禁用Web支持？
- 18
如何在Flutter中创建无限PageView
- 19
如何在Flutter中更改提示大小？
- 20
如何在Flutter中更改Drawer图标？
- 21
如何在Xcode中打开Flutter插件？
- 22
如何在flutter中创建callBack
- 23
如何在Flutter中从TextFormField更新变量？
- 24
如何在Flutter中启动URL？
- 25
如何在Flutter中自动刷新listView？
- 26
如何在vscode中添加图像-Flutter
- 27
如何在Flutter中拍摄屏幕截图？
- 28
如何在Flutter中获取实时通知
- 29
如何在Flutter中更改CupertinoSwitch的大小？
我来说两句