如何在 Flutter 中为平板电脑屏幕安装交错网格

问题描述

我正在尝试为平板电脑屏幕制作带有数字键盘的付款屏幕。我正在使用 StaggeredGridView (https://pub.dev/packages/flutter_staggered_grid_view)。我想要实现的是这样的屏幕preview of POST payment screen

所以我这样编码

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,1),],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'),child: OutlineButton(
                              onpressed: () {
                                _tulisAngka('3');
                              },child: Text('3'),child: OutlineButton(
                              onpressed: _bayar > 0
                                  ? () {
                                      _hapusAngka();
                                    }
                                  : null,child: Icon(Icons.backspace_outlined),child: OutlineButton(
                              onpressed: () {
                                _tulisAngka('4');
                              },child: Text('4'),child: OutlineButton(
                              onpressed: () {
                                _tulisAngka('5');
                              },child: Text('5'),child: OutlineButton(
                              onpressed: () {
                                _tulisAngka('6');
                              },child: Text('6'),child: OutlineButton(
                              onpressed: () {
                                _tulisAngka('7');
                              },child: Text('7'),child: OutlineButton(
                              onpressed: () {
                                _tulisAngka('8');
                              },child: Text('8'),child: OutlineButton(
                              onpressed: () {
                                _tulisAngka('9');
                              },child: Text('9'),child: RaisedButton(
                              color: t5ColorPrimary,onpressed: _bayar > 0 && _bayar >= _total
                                  ? () {
                                      _bayarTransaksi();
                                    }
                                  : null,child: Text(
                                'OK',style: TextStyle(color: t5White),child: OutlineButton(
                              onpressed: _bayar > 0
                                  ? () {
                                      _clearangka();
                                    }
                                  : null,child: Text('C'),child: OutlineButton(
                              onpressed: () {
                                _tulisAngka('0');
                              },child: Text('0'),child: OutlineButton(
                              onpressed: () {
                                _tulisAngka('000');
                              },child: Text('000'),))

但是我得到的结果是这样的attempt to make payment screen。底部按钮被裁剪了，这不是我想要的。 我仍然不明白如何使用 StaggeredGrid。制作键盘的正确方法是什么？

解决方法

我终于找到了解决方案 看到StaggeredGridView的示例工程后，我把tile做了extent，所以代码是这样的

assertThat(rr.maxRuntimeSeconds.toInt()).isEqualTo(60*60*24*2)

这将得到这个结果 layouting staggeredgrid using extent tile