用于较小屏幕的Flutter GridView小部件

Question

我正在尝试在我的应用程序中构建2x3 GridView，它在大屏幕设备上可以正常工作，但对于iPhone SE（4英寸）这样的设备，GridView不能自行缩放。它从底部滚动显示或溢出。

我如何确保将所有其他小部件放置到其位置，并且其余空间由GridView使用，并且没有滚动，每个项目都是可见的？您可以检查下面的代码，也可以检查this codepen

import 'package:flutter/material.dart';

class StatsScreen extends StatefulWidget {
 static const String id = 'stats_screen';

 StatsScreen({Key key}) : super(key: key);
 @override
 _StatsScreenState createState() => _StatsScreenState();
}

class _StatsScreenState extends State<StatsScreen> {
 @override
 Widget build(BuildContext context) {
   return Scaffold(
     body: Container(
       padding:
           EdgeInsets.only(top: 60.0, left: 20.0, right: 20.0, bottom: 0.0),
       child: Column(
         crossAxisAlignment: CrossAxisAlignment.stretch,
         children: <Widget>[
           Text(
             'MyText',
             style: TextStyle(fontSize: 30.0, fontWeight: FontWeight.w700),
           ),
           SizedBox(
             height: 20,
           ),
           Expanded(
             child: GridView.count(
               primary: false,
               shrinkWrap: true,
               padding: const EdgeInsets.all(0),
               crossAxisSpacing: 10,
               mainAxisSpacing: 10,
               crossAxisCount: 2,
               children: <Widget>[
                 Container(
                   padding: const EdgeInsets.all(8),
                   child: const Text('He\'d have you all unravel at the'),
                   color: Colors.teal[100],
                 ),
                 Container(
                   padding: const EdgeInsets.all(8),
                   child: const Text('Heed not the rabble'),
                   color: Colors.teal[200],
                 ),
                 Container(
                   padding: const EdgeInsets.all(8),
                   child: const Text('Sound of screams but the'),
                   color: Colors.teal[300],
                 ),
                 Container(
                   padding: const EdgeInsets.all(8),
                   child: const Text('Who scream'),
                   color: Colors.teal[400],
                 ),
                 Container(
                   padding: const EdgeInsets.all(8),
                   child: const Text('Revolution is coming...'),
                   color: Colors.teal[500],
                 ),
                 Container(
                   padding: const EdgeInsets.all(8),
                   child: const Text('Revolution, they...'),
                   color: Colors.teal[600],
                 ),
               ],
             ),
           ),
           SizedBox(
             height: 30.0,
           ),
           RaisedButton(
             onPressed: () {},
             child: Text(
               'MyRaisedButton',
               style: TextStyle(
                 fontSize: 30.0,
                 color: Colors.white,
               ),
             ),
             color: Colors.red[900],
             shape: RoundedRectangleBorder(
               borderRadius: BorderRadius.circular(30.0),
             ),
           )
         ],
       ),
     ),
   );
 }
}

Answer 1

GridView.count具有称为childAspectRatio的属性。

[childAspectRatio是每个孩子的横轴与主轴范围的比率。

您可以将0开始的属性调整为所需应用程序要求的任何值。

我希望这会有所帮助。

注意：childAspectRatio的值必须大于0。

查看下面的代码作为示例：

GridView.count(
               childAspectRatio: 1.0,
               primary: false,
               shrinkWrap: true,
               padding: const EdgeInsets.all(0),
               crossAxisSpacing: 10,
               mainAxisSpacing: 10,
               crossAxisCount: 2,
               children: <Widget>[
                  ........
                   ]
              )

Answer 2

尝试将主体包裹在SafeArea小部件中。