笔录Flutter（四）GridView常用属性、使用

最新推荐文章于 2024-01-10 18:53:00 发布

Join下班了吗

最新推荐文章于 2024-01-10 18:53:00 发布

阅读量728

点赞数 1

分类专栏： Flutter 文章标签： GridView

本文链接：https://blog.csdn.net/qq_34501274/article/details/98502566

版权

Flutter 专栏收录该内容

11 篇文章 2 订阅

订阅专栏

本文详细介绍Flutter中GridView的四种使用方式，重点对比了GridView.builder与其他三种（GridView(), GridView.count(), GridView.extent()）的主要区别，尤其适合子Widget数量较多的场景。通过实例代码展示了GridView.builder的具体实现，包括动态创建子Widget的方法。

摘要由CSDN通过智能技术生成

Flutter练习demo

常用属性

在这里插入图片描述

使用方式

在这里插入图片描述

4种使用方式的区别

GridView()、GridView.count()、GridView.extent() 这三种和GridView.builder()的区别在于：

GridView都需要一个Widget数组作为其子元素，前三种方式都会提前将所有子widget都构建好，所以只适用于子Widget数量比较少
当子widget比较多时，我们可以通过GridView.builder来动态创建子Widget。

这里只说下GridView.builder()方式。

更多的使用方式参考GridView

GridView.builder()

效果图：
在这里插入图片描述

import 'package:flutter/material.dart';

class GridViewPage extends State {
  List<String> list = new List();

  GridViewPage() : super() {
    for (var x = 0; x < 10; x++) {
      list.add("GirdView=$x");
    }
  }

  BoxDecoration _decoration = new BoxDecoration(
    borderRadius: BorderRadius.only(
      bottomLeft: Radius.circular(5),
      bottomRight: Radius.circular(5),
    ),
  );

  Widget _getWidget(BuildContext ctx, int i) {
    return Container(
      alignment: Alignment.bottomCenter,
      decoration: BoxDecoration(
          image: DecorationImage(
            fit: BoxFit.cover,
            image: AssetImage(
              "images/s.jpg",
            ),
          ),
          borderRadius: BorderRadius.circular(5)),
      child: Container(
        width: double.infinity,
        alignment: Alignment.center,
        height: 30,
        child: Text(
          "List__${list[i]}",
          style: TextStyle(color: Colors.cyan),
        ),
        decoration: BoxDecoration(
        color: Color(0x66000000),
        borderRadius: BorderRadius.only(
            bottomLeft: Radius.circular(5),
            bottomRight: Radius.circular(5),
          ),
        ),
      ),
    );
  }

  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text("Girdview"),
        ),
        body: GridView.builder(
            padding: EdgeInsets.all(10),
            itemCount: list.length,
            gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
              crossAxisCount: 2,
              mainAxisSpacing: 10,
              crossAxisSpacing: 10,
              childAspectRatio: 0.7,
            ),
            itemBuilder: _getWidget),
      ),
    );
  }
}