Flutter - GridView

Flutter - GridView 首页 / Flutter入门教程 / Flutter - GridView

网格视图(GridView)是用于以表格形式显示项目的图形控制元素。在本节中,无涯教程将学习如何在Flutter应用程序中的网格视图中渲染项目。

GridView是Flutter中的一个小部件,用于以二维数组(二维行和列)显示项目。顾名思义,当无涯教程要在网格中显示项目时将使用它。无涯教程可以通过点击从网格列表中选择所需的项目。该窗口小部件可以包含文本,图像,图标等,以根据用户要求以网格布局显示。它也称为小部件的可滚动2-D数组。由于它是可滚动的,因此无涯教程只能指定它滚动的方向。

网格视图可以以各种方式实现,如下所示:

  1. count()
  2. builder()
  3. custom()
  4. layer()

让无涯教程详细讨论上述所有内容。

GridView.count()

这是Flutter中最常用的网格布局,因为在这里,无涯教程已经知道了网格的大小。它允许指定固定的行数和列数。 GriedView.count()包含以下属性:

crossAxisCount                                  -  用于指定网格视图中的列数。

crossAxisSpacing                              -   用于指定交叉轴中列出的每个子小部件之间的像素数。

mainAxisSpacing                              -   用于指定主轴中列出的每个子小部件之间的像素数。

padding(EdgeInsetsGeometry)     -   用于指定整个小部件列表周围的空间。

scrollDirection                                  -   用于指定GridView上的项目滚动的方向。默认情况下,它沿垂直方向滚动。

reverse                                                -   如果为true,则会沿主轴的相反方向反转列表。

physics                                                -   用于确定用户在滚动时到达小部件的末尾或开始时列表的行为。

shrinkWrap                                   -   如果为false,则可滚动列表将在滚动方向上占用更多空间。

让无涯教程通过一个示例来了解它,看看如何在Flutter中创建GridView来创建网格列表。首先,在您使用的IDE中创建一个新项目。打开项目,导航到lib文件夹,然后将以下代码替换为main.dart文件。
import 'package:flutter/material.dart';

void main() {runApp(MyApp());}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
        home: Scaffold(appBar: AppBar(
          title: Text("Flutter GridView Demo"),
        ),
            body: GridView.count(
                crossAxisCount: 3,
                crossAxisSpacing: 4.0,
                mainAxisSpacing: 8.0,
                children: List.generate(choices.length, (index) {
                  return Center(
                    child: SelectCard(choice: choices[index]),
                  );
                }
                )
            )
        )
    );
  }
}

class Choice {
  const Choice({this.title, this.icon});
  final String title;
  final IconData icon;
}

const List<Choice> choices = const <Choice>[
  const Choice(title: 'Home', icon: Icons.home),
  const Choice(title: 'Contact', icon: Icons.contacts),
  const Choice(title: 'Map', icon: Icons.map),
  const Choice(title: 'Phone', icon: Icons.phone),
  const Choice(title: 'Camera', icon: Icons.camera_alt),
  const Choice(title: 'Setting', icon: Icons.settings),
  const Choice(title: 'Album', icon: Icons.photo_album),
  const Choice(title: 'WiFi', icon: Icons.wifi),
];

class SelectCard extends StatelessWidget {
  const SelectCard({Key key, this.choice}) : super(key: key);
  final Choice choice;

  @override
  Widget build(BuildContext context) {
    final TextStyle textStyle = Theme.of(context).textTheme.display1;
    return Card(
        color: Colors.orange,
        child: Center(child: Column(
            crossAxisAlignment: CrossAxisAlignment.center,
            children: <Widget>[
              Expanded(child: Icon(choice.icon, size:50.0, color: textStyle.color)),
              Text(choice.title, style: textStyle),
            ]
        ),
        )
    );
  }
}

在上面的代码中,无涯教程想要在网格中显示的项目创建了一个类,然后添加一些数据。接下来,无涯教程构建了将在GridView中显示的小部件。

当无涯教程在Android Studio中运行应用程序时,可以在模拟器中看到以下屏幕。

无涯教程网

Flutter GridView

GridView.Builder()

当无涯教程要动态或按需显示数据时,使用此属性。换句话说,如果用户想要创建一个具有大量(无限)子项的网格,则他们可以将GridView.builder()构造函数与SliverGridDelegateWithFixedCrossAxisCount或SliverGridDelegateWithMaxCrossAxisExtent一起使用。

此小部件的常见属性是:

itemCount         -  它用于定义要显示的数据量。

gridDelegate     -  它确定网格或其分隔线。它的参数不能为null。

itemBuilder      -  它用于创建将在网格视图上显示的项目。仅当indices>=0 &&indeices<itemCount时才调用它。

让无涯教程在一个例子的帮助下了解它。打开项目,导航到lib文件夹,并使用 main.dart 文件替换以下代码。

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {

  List images = [
    "https://static.learnfk.com/tutorial/flutter/images/flutter-logo.png",
    "https://static.learnfk.com/tutorial/flutter/images/flutter-logo.png",
    "https://static.learnfk.com/tutorial/flutter/images/flutter-logo.png",
    "https://static.learnfk.com/tutorial/flutter/images/flutter-logo.png"
  ];

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text("Flutter GridView Demo"),
          backgroundColor: Colors.red,
        ),
        body: Container(
            padding: EdgeInsets.all(12.0),
            child: GridView.builder(
              itemCount: images.length,
              gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
                  crossAxisCount: 2,
                  crossAxisSpacing: 4.0,
                  mainAxisSpacing: 4.0
              ),
              itemBuilder: (BuildContext context, int index){
                return Image.network(images[index]);
              },
            )),
      ),
    );
  }
}

当无涯教程在Android Studio中运行应用程序时,可以在模拟器中看到以下屏幕。

无涯教程网

Flutter GridView

GridView.extent()

当无涯教程要创建具有自定义范围值的网格时,将使用此属性。这意味着每个图块都具有最大的横轴范围。

让无涯教程在一个例子的帮助下了解它。打开项目,导航到lib文件夹,并使用 main.dart 文件替换以下代码。

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
 //这个小部件是您的应用程序的根。
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: MyGridScreen(),
    );
  }
}

class MyGridScreen extends StatefulWidget {
  MyGridScreen({Key key}) : super(key: key);

  @override
  _MyGridScreenState createState() => _MyGridScreenState();
}

class _MyGridScreenState extends State {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("Flutter GridView Demo"),
        backgroundColor: Colors.green,
      ),
      body: Center(
          child: GridView.extent(
            primary: false,
            padding: const EdgeInsets.all(16),
            crossAxisSpacing: 10,
            mainAxisSpacing: 10,
            maxCrossAxisExtent: 200.0,
            children: [
              Container(
                padding: const EdgeInsets.all(8),
                child: const Text('First', style: TextStyle(fontSize: 20)),
                color: Colors.yellow,
              ),
              Container(
                padding: const EdgeInsets.all(8),
                child: const Text('Second', style: TextStyle(fontSize: 20)),
                color: Colors.blue,
              ),
              Container(
                padding: const EdgeInsets.all(8),
                child: const Text('Third', style: TextStyle(fontSize: 20)),
                color: Colors.blue,
              ),
              Container(
                padding: const EdgeInsets.all(8),
                child: const Text('Four', style: TextStyle(fontSize: 20)),
                color: Colors.yellow,
              ),
              Container(
                padding: const EdgeInsets.all(8),
                child: const Text('Fifth', style: TextStyle(fontSize: 20)),
                color: Colors.yellow,
              ),
              Container(
                padding: const EdgeInsets.all(8),
                child: const Text('Six', style: TextStyle(fontSize: 20)),
                color: Colors.blue,
              ),
            ],
          )),
    );
  }
}

当无涯教程在Android Studio中运行应用程序时,可以在模拟器中看到以下屏幕。

无涯教程网

Flutter GridView

祝学习愉快!(内容编辑有误?请选中要编辑内容 -> 右键 -> 修改 -> 提交!)

技术教程推荐

深入剖析Kubernetes -〔张磊〕

Netty源码剖析与实战 -〔傅健〕

后端存储实战课 -〔李玥〕

Spark核心原理与实战 -〔王磊〕

陶辉的网络协议集训班02期 -〔陶辉〕

如何成为学习高手 -〔高冷冷〕

编程高手必学的内存知识 -〔海纳〕

人人都用得上的数字化思维课 -〔付晓岩〕

结构思考力 · 透过结构看思考 -〔李忠秋〕

好记忆不如烂笔头。留下您的足迹吧 :)