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

Question

我正在尝试为平板电脑屏幕制作带有数字键盘的付款屏幕。我正在使用 StaggeredGridView (https://pub.dev/packages/flutter_staggered_grid_view). What I want to achieve is screen like this 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, .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'),
                            ),
                          ),
                        ],
                      ))

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

Answer 1

终于找到解决办法了看了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'),
                            ),
                          ),
                        ],
                      ))

这将给出这个结果 layouting staggeredgrid using extent tile

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

How to fit Staggered Grid for tablet screen in Flutter

grid

android

tablet

flutter