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

Question

我正在尝试在我的应用程序中构建一个 2x3 GridView，它在大屏幕设备上运行良好，但对于 iPhone SE（4 英寸）等设备，GridView 无法自行缩放。它出现滚动或从底部溢出。

我如何确保所有其他小部件都放置在它们的位置，并且 space 的其余部分由 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

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

Answer 2

GridView.count 有一个名为 childAspectRatio 的属性。

childAspectRatio 是 cross-axis 与每个 child 的 main-axis 范围的比率。

您可以将属性从 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>[
                  ........
                   ]
              )

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

Flutter GridView Widget for Smaller Screens

flutter

flutter-layout

flutter-widget

flutter-gridview