📌  相关文章
📜  Flutter- 网格视图

📅  最后修改于: 2022-05-13 01:56:52.498000             🧑  作者: Mango

Flutter- 网格视图

Flutter GridView是一个类似于任何编程语言中的二维数组的小部件。顾名思义，当我们必须在 Grid 上显示某些内容时，就会使用GridView Widget。我们可以在 GridView 上显示图像、文本、图标等。我们可以在Flutter中以多种方式实现 GridView：

  • GridView.count()
  • GridView.builder()
  • GridView.custom()
  • GridView.extent()

GridView 的构造函数： 

GridView(
{Key key,
Axis scrollDirection: Axis.vertical,
bool reverse: false,
ScrollController controller,
bool primary,
ScrollPhysics physics,
bool shrinkWrap: false,
EdgeInsetsGeometry padding,
@required SliverGridDelegate gridDelegate,
bool addAutomaticKeepAlives: true,
bool addRepaintBoundaries: true,
bool addSemanticIndexes: true,
double cacheExtent,
List children: const [],
int semanticChildCount,
DragStartBehavior dragStartBehavior: DragStartBehavior.start,
Clip clipBehavior: Clip.hardEdge,
ScrollViewKeyboardDismissBehavior keyboardDismissBehavior: ScrollViewKeyboardDismissBehavior.manual,
String restorationId}
)

GridView.builder 的构造函数： 

GridView.builder(
{Key key,
Axis scrollDirection: Axis.vertical,
bool reverse: false,
ScrollController controller,
bool primary,
ScrollPhysics physics,
bool shrinkWrap: false,
EdgeInsetsGeometry padding,
@required SliverGridDelegate gridDelegate,
@required IndexedWidgetBuilder itemBuilder,
int itemCount,
bool addAutomaticKeepAlives: true,
bool addRepaintBoundaries: true,
bool addSemanticIndexes: true,
double cacheExtent,
int semanticChildCount,
DragStartBehavior dragStartBehavior: DragStartBehavior.start,
ScrollViewKeyboardDismissBehavior keyboardDismissBehavior: ScrollViewKeyboardDismissBehavior.manual,
String restorationId,
Clip clipBehavior: Clip.hardEdge}
)

GridView.count 的构造函数： 

GridView.count(
{Key key,
Axis scrollDirection: Axis.vertical,
bool reverse: false,
ScrollController controller,
bool primary,
ScrollPhysics physics,
bool shrinkWrap: false,
EdgeInsetsGeometry padding,
@required int crossAxisCount,
double mainAxisSpacing: 0.0,
double crossAxisSpacing: 0.0,
double childAspectRatio: 1.0,
bool addAutomaticKeepAlives: true,
bool addRepaintBoundaries: true,
bool addSemanticIndexes: true,
double cacheExtent,
List children: const [],
int semanticChildCount,
DragStartBehavior dragStartBehavior: DragStartBehavior.start,
ScrollViewKeyboardDismissBehavior keyboardDismissBehavior: ScrollViewKeyboardDismissBehavior.manual,
String restorationId,
Clip clipBehavior: Clip.hardEdge}
)

GridView.custom 的构造函数： 

const GridView.custom(
{Key key,
Axis scrollDirection: Axis.vertical,
bool reverse: false,
ScrollController controller,
bool primary,
ScrollPhysics physics,
bool shrinkWrap: false,
EdgeInsetsGeometry padding,
@required SliverGridDelegate gridDelegate,
@required SliverChildDelegate childrenDelegate,
double cacheExtent,
int semanticChildCount,
DragStartBehavior dragStartBehavior: DragStartBehavior.start,
ScrollViewKeyboardDismissBehavior keyboardDismissBehavior: ScrollViewKeyboardDismissBehavior.manual,
String restorationId,
Clip clipBehavior: Clip.hardEdge}
)

GridView.extent 的构造函数： 

GridView.extent(
{Key key,
Axis scrollDirection: Axis.vertical,
bool reverse: false,
ScrollController controller,
bool primary,
ScrollPhysics physics,
bool shrinkWrap: false,
EdgeInsetsGeometry padding,
@required double maxCrossAxisExtent,
double mainAxisSpacing: 0.0,
double crossAxisSpacing: 0.0,
double childAspectRatio: 1.0,
bool addAutomaticKeepAlives: true,
bool addRepaintBoundaries: true,
bool addSemanticIndexes: true,
double cacheExtent,
List children: const [],
int semanticChildCount,
DragStartBehavior dragStartBehavior: DragStartBehavior.start,
ScrollViewKeyboardDismissBehavior keyboardDismissBehavior: ScrollViewKeyboardDismissBehavior.manual,
String restorationId,
Clip clipBehavior: Clip.hardEdge}
)

GridView 的属性：

  • anchor：该属性接受一个double值作为控制零滚动效果的对象。
  • childrenDelegate： sliverChildDelegate是这个属性的对象。它提供了一个为GridView 的子代提供服务的委托。
  • clipBehaviour：该属性以Clip 枚举为对象，决定是否裁剪GridView中的内容。
  • controller：该属性持有ScrollController类作为对象来控制滚动视图的位置。
  • dragStartBehaviour：该属性以DragStartBehavior 枚举为对象。它控制拖动行为的工作方式。
  • gridDelegate： SliverGridDelegate类是对象的这个属性。它负责处理GridView 中子小部件布局的委托。

GridView.count() 是一种经常使用的方法，它在我们已经知道 Grid 的大小时使用。每当我们必须动态实现 GridView 时，我们都会使用 GridView.builder()。两者就像普通数组和动态数组一样。在Flutter中，使用最多的是两个 GridView。

GridView.count() 与一些命名参数一起使用。我们可以与 GridView.count() 一起使用的属性是：

  • crossAxisCount：它定义了 GridView 中的列数。
  • crossAxisSpacing：它定义了沿交叉轴列出的每个子项之间的像素数。
  • mainAxisSpacing：它定义了沿主轴列出的每个子项之间的像素数。
  • padding(EdgeInsetsGeometry)：它定义了围绕整个小部件列表的空间量。
  • primary：如果为 true，则它的“滚动控制器”由框架隐式获取。
  • scrollDirection：它定义了 GridView 上的项目将移动的方向，默认是垂直的。
  • reverse：如果设置为true，它只是沿主轴以相反方向反转小部件列表。
  • 物理：它确定当用户在滚动时到达小部件的末尾或开始时小部件列表的行为方式。
  • shrinkWrap：默认情况下，它的值为 false，然后可滚动列表占用与滚动方向一样多的空间，这是不好的，因为它占用内存浪费内存并且应用程序的性能降低并且可能会产生一些错误，因此要避免滚动时内存泄漏，我们通过将 shrinkWrap 设置为 true 来使用 shrinkWrap 包装我们的子小部件，然后可滚动列表将与子小部件允许的一样大。
Dart
import 'package:flutter/material.dart';
 
void main() {
  runApp(GeeksForGeeks());
}
 
class GeeksForGeeks extends StatelessWidget {
 
  // This widget is the root of your application
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        backgroundColor: Colors.black,
        appBar: AppBar(
          backgroundColor: Colors.blueGrey[900],
          title: Center(
            child: Text(
              'Flutter GridView Demo',
              style: TextStyle(
                color: Colors.blueAccent,
                fontWeight: FontWeight.bold,
                fontSize: 30.0,
              ),
            ),
          ),
        ),
        body: GridView.count(
          crossAxisCount: 2,
          crossAxisSpacing: 10.0,
          mainAxisSpacing: 10.0,
          shrinkWrap: true,
          children: List.generate(20, (index) {
              return Padding(
                padding: const EdgeInsets.all(10.0),
                child: Container(
                  decoration: BoxDecoration(
                    image: DecorationImage(
                      image: NetworkImage('img.png'),
                      fit: BoxFit.cover,
                    ),
                    borderRadius:
                    BorderRadius.all(Radius.circular(20.0),),
                  ),
                ),
              );
            },),
        ),
      ),
    );
  }
}

输出：

Flutter GridView 演示