网格视图(GridView)是用于以表格形式显示项目的图形控制元素。在本节中,无涯教程将学习如何在Flutter应用程序中的网格视图中渲染项目。
GridView是Flutter中的一个小部件,用于以二维数组(二维行和列)显示项目。顾名思义,当无涯教程要在网格中显示项目时将使用它。无涯教程可以通过点击从网格列表中选择所需的项目。该窗口小部件可以包含文本,图像,图标等,以根据用户要求以网格布局显示。它也称为小部件的可滚动2-D数组。由于它是可滚动的,因此无涯教程只能指定它滚动的方向。
网格视图可以以各种方式实现,如下所示:
让无涯教程详细讨论上述所有内容。
这是Flutter中最常用的网格布局,因为在这里,无涯教程已经知道了网格的大小。它允许指定固定的行数和列数。 GriedView.count()包含以下属性:
crossAxisCount - 用于指定网格视图中的列数。
crossAxisSpacing - 用于指定交叉轴中列出的每个子小部件之间的像素数。
mainAxisSpacing - 用于指定主轴中列出的每个子小部件之间的像素数。
padding(EdgeInsetsGeometry) - 用于指定整个小部件列表周围的空间。
scrollDirection - 用于指定GridView上的项目滚动的方向。默认情况下,它沿垂直方向滚动。
reverse - 如果为true,则会沿主轴的相反方向反转列表。
physics - 用于确定用户在滚动时到达小部件的末尾或开始时列表的行为。
shrinkWrap - 如果为false,则可滚动列表将在滚动方向上占用更多空间。
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中运行应用程序时,可以在模拟器中看到以下屏幕。
当无涯教程要动态或按需显示数据时,使用此属性。换句话说,如果用户想要创建一个具有大量(无限)子项的网格,则他们可以将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 { Listimages = [ "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中运行应用程序时,可以在模拟器中看到以下屏幕。
当无涯教程要创建具有自定义范围值的网格时,将使用此属性。这意味着每个图块都具有最大的横轴范围。
让无涯教程在一个例子的帮助下了解它。打开项目,导航到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中运行应用程序时,可以在模拟器中看到以下屏幕。
祝学习愉快!(内容编辑有误?请选中要编辑内容 -> 右键 -> 修改 -> 提交!)