android - 如何在 Flutter 中为平板电脑屏幕设置交错网格
问题描述
我正在尝试为平板电脑屏幕制作带有数字键盘的付款屏幕。我正在使用 StaggeredGridView ( https://pub.dev/packages/flutter_staggered_grid_view )。我想要实现的是类似POST 付款屏幕预览的屏幕
所以我这样编码
Container(
height: 450,
padding: EdgeInsets.all(10),
child: StaggeredGridView.count(
crossAxisCount: 4,
crossAxisSpacing: 1,
mainAxisSpacing: 1,
shrinkWrap: true,
physics: NeverScrollableScrollPhysics(),
staggeredTiles: [
StaggeredTile.count(1, .5),
StaggeredTile.count(1, .5),
StaggeredTile.count(1, .5),
StaggeredTile.count(1, 1),
StaggeredTile.count(1, .5),
StaggeredTile.count(1, .5),
StaggeredTile.count(1, .5),
StaggeredTile.count(1, .5),
StaggeredTile.count(1, .5),
StaggeredTile.count(1, .5),
StaggeredTile.count(1, 1),
StaggeredTile.count(1, .5),
StaggeredTile.count(1, .5),
StaggeredTile.count(1, .5),
],
children: [
Padding(
padding: EdgeInsets.all(3),
child: OutlineButton(
onPressed: () {
_tulisAngka('1');
},
child: Text('1'),
),
),
Padding(
padding: EdgeInsets.all(3),
child: OutlineButton(
onPressed: () {
_tulisAngka('2');
},
child: Text('2'),
),
),
Padding(
padding: EdgeInsets.all(3),
child: OutlineButton(
onPressed: () {
_tulisAngka('3');
},
child: Text('3'),
),
),
Padding(
padding: EdgeInsets.all(3),
child: OutlineButton(
onPressed: _bayar > 0
? () {
_hapusAngka();
}
: null,
child: Icon(Icons.backspace_outlined),
),
),
Padding(
padding: EdgeInsets.all(3),
child: OutlineButton(
onPressed: () {
_tulisAngka('4');
},
child: Text('4'),
),
),
Padding(
padding: EdgeInsets.all(3),
child: OutlineButton(
onPressed: () {
_tulisAngka('5');
},
child: Text('5'),
),
),
Padding(
padding: EdgeInsets.all(3),
child: OutlineButton(
onPressed: () {
_tulisAngka('6');
},
child: Text('6'),
),
),
Padding(
padding: EdgeInsets.all(3),
child: OutlineButton(
onPressed: () {
_tulisAngka('7');
},
child: Text('7'),
),
),
Padding(
padding: EdgeInsets.all(3),
child: OutlineButton(
onPressed: () {
_tulisAngka('8');
},
child: Text('8'),
),
),
Padding(
padding: EdgeInsets.all(3),
child: OutlineButton(
onPressed: () {
_tulisAngka('9');
},
child: Text('9'),
),
),
Padding(
padding: EdgeInsets.all(3),
child: RaisedButton(
color: t5ColorPrimary,
onPressed: _bayar > 0 && _bayar >= _total
? () {
_bayarTransaksi();
}
: null,
child: Text(
'OK',
style: TextStyle(color: t5White),
),
),
),
Padding(
padding: EdgeInsets.all(3),
child: OutlineButton(
onPressed: _bayar > 0
? () {
_clearAngka();
}
: null,
child: Text('C'),
),
),
Padding(
padding: EdgeInsets.all(3),
child: OutlineButton(
onPressed: () {
_tulisAngka('0');
},
child: Text('0'),
),
),
Padding(
padding: EdgeInsets.all(3),
child: OutlineButton(
onPressed: () {
_tulisAngka('000');
},
child: Text('000'),
),
),
],
))
但是我得到的结果是这样的尝试付款屏幕。底部按钮被裁剪,这不是我想要的。我仍然不清楚如何使用 StaggeredGrid。制作键盘的正确方法是什么?
解决方案
终于找到解决办法看了StaggeredGridView的示例项目,我把tile做了extent,所以代码是这样的
Container(
height: 420,
padding: EdgeInsets.all(10),
child: StaggeredGridView.count(
crossAxisCount: 4,
crossAxisSpacing: 1,
mainAxisSpacing: 1,
shrinkWrap: true,
physics: NeverScrollableScrollPhysics(),
staggeredTiles: [
StaggeredTile.extent(1, 100),
StaggeredTile.extent(1, 100),
StaggeredTile.extent(1, 100),
StaggeredTile.extent(1, 201),
StaggeredTile.extent(1, 100),
StaggeredTile.extent(1, 100),
StaggeredTile.extent(1, 100),
StaggeredTile.extent(1, 100),
StaggeredTile.extent(1, 100),
StaggeredTile.extent(1, 100),
StaggeredTile.extent(1, 201),
StaggeredTile.extent(1, 100),
StaggeredTile.extent(1, 100),
StaggeredTile.extent(1, 100),
],
children: [
Padding(
padding: EdgeInsets.all(3),
child: OutlineButton(
onPressed: () {
_tulisAngka('1');
},
child: Text('1'),
),
),
Padding(
padding: EdgeInsets.all(3),
child: OutlineButton(
onPressed: () {
_tulisAngka('2');
},
child: Text('2'),
),
),
Padding(
padding: EdgeInsets.all(3),
child: OutlineButton(
onPressed: () {
_tulisAngka('3');
},
child: Text('3'),
),
),
Padding(
padding: EdgeInsets.all(3),
child: OutlineButton(
onPressed: _bayar > 0
? () {
_hapusAngka();
}
: null,
child: Icon(Icons.backspace_outlined),
),
),
Padding(
padding: EdgeInsets.all(3),
child: OutlineButton(
onPressed: () {
_tulisAngka('4');
},
child: Text('4'),
),
),
Padding(
padding: EdgeInsets.all(3),
child: OutlineButton(
onPressed: () {
_tulisAngka('5');
},
child: Text('5'),
),
),
Padding(
padding: EdgeInsets.all(3),
child: OutlineButton(
onPressed: () {
_tulisAngka('6');
},
child: Text('6'),
),
),
Padding(
padding: EdgeInsets.all(3),
child: OutlineButton(
onPressed: () {
_tulisAngka('7');
},
child: Text('7'),
),
),
Padding(
padding: EdgeInsets.all(3),
child: OutlineButton(
onPressed: () {
_tulisAngka('8');
},
child: Text('8'),
),
),
Padding(
padding: EdgeInsets.all(3),
child: OutlineButton(
onPressed: () {
_tulisAngka('9');
},
child: Text('9'),
),
),
Padding(
padding: EdgeInsets.all(3),
child: RaisedButton(
color: t5ColorPrimary,
onPressed: _bayar > 0 && _bayar >= _total
? () {
_bayarTransaksi();
}
: null,
child: Text(
'OK',
style: TextStyle(color: t5White),
),
),
),
Padding(
padding: EdgeInsets.all(3),
child: OutlineButton(
onPressed: _bayar > 0
? () {
_clearAngka();
}
: null,
child: Text('C'),
),
),
Padding(
padding: EdgeInsets.all(3),
child: OutlineButton(
onPressed: () {
_tulisAngka('0');
},
child: Text('0'),
),
),
Padding(
padding: EdgeInsets.all(3),
child: OutlineButton(
onPressed: () {
_tulisAngka('000');
},
child: Text('000'),
),
),
],
))
这将给出这个结果使用范围瓷砖布局交错网格
推荐阅读
- google-slides-api - 在浏览器中打开演示文稿并监听演示文稿结束事件
- c# - 由于系统命名,从 JSON 主体映射到模型问题
- java - 应用程序无法连接到简单的服务器
- javascript - Javascript 正则表达式从连接 sql 查询中获取表名
- facebook - 为什么 twitter 和 facebook 不重定向到 amp 页面?
- android - 使用 Retrofit 和 gson 映射动态对象
- javascript - Javascript减少条件
- android - 如何在 android webview 应用程序中集成 vlc 媒体播放器
- python - Django:迁移错误
- django - 将用户友好的 json 编辑器添加到 django admin