按钮容器 ButtonBar:一组带边距的横排显示按钮

0
视频
0
完成
0%
进度
0
分钟
0
完成
0%
进度

如果你需要一组并排显示的按钮,按钮之间还有点边距,可以把一组按钮放在一个 ButtonBar 里面 .. 这个 ButtonBar 其实就是一个带特定设置的 Row 小部件 ..

先剪切一个按钮 .. 然后添加一个 ButtonBar .. 给它一个 children 属性 .. 里面就是一组并排显示的按钮 .. 再复制一个按钮 ..

这两个按钮会并排显示,而且它们之间还有一个间隔 .. 按住 alt 键 ... 点一下 ButtonBar ... 查看一下定义这个 ButtonBar 的地方 ..

这里你会发现,它其实是一个 Padding 小部件 .. 里面包装了一个 Row ... 这个 Row 的孩子们又用了一个 Padding .. 这个 padding 会在水平方向,也就是左边还有右边添加一个特定的边距 ..

这个边距的值会根据 ButtonTheme ,也就是按钮主题里面设置的那个 padding 的水平方向的值来确定 ..

下面可以试一下 .. 先剪切一下这个 ButtonBar .. 然后添加一个 Theme .. 里面有个 data 属性 .. 还有一个 child .. 这个 child 就是 ButtonBar ..

data 可以用一下 Theme.of context copyWidth .. 里面设置一下 buttonTheme ... 它是 ButtonThemeData .. 里面添加一个 padding 属性 .. 然后设置一下水平方向的边距 .. EdgeInsets .. symmetric .. 设置一下 horizontal .. 大小先设置成 16.0 ..

再调整一下这个值的大小 .. 设置成 32.0 ... 你会发现按钮之间的距离会比之前大一些 ...

最后再保存一下这个练习 .. 复制一下这个 Row ...

上面可以添加一个 Widget .. 名字是 ButtonBarDemo ... 再把复制的小部件交给它 ...

按钮容器 ButtonBar:一组带边距的横排显示按钮《 Flutter 移动应用:按钮 》

统计

14696
分钟
0
你学会了
0%
完成

社会化网络

关于

微信订阅号

扫描微信二维码关注宁皓网,每天进步一点