用于小屏幕的 Flutter GridView 小部件答案

【问题标题】：Flutter GridView Widget for Smaller Screens用于小屏幕的 Flutter GridView 小部件
【发布时间】：2020-08-19 11:07:15
【问题描述】：

我正在尝试在我的应用程序中构建一个 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),
             ),
           )
         ],
       ),
     ),
   );
 }
}

【问题讨论】：

标签： flutter flutter-layout flutter-widget flutter-gridview

【解决方案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>[
                  ........
                   ]
              )

【讨论】：

【解决方案2】：

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

【讨论】：

Thnaks，我试过了。没有溢出，但 GridView 有一个活动滚动，有些项目不可见。