0
点赞
收藏
分享

微信扫一扫

flutter组件之GridView.builder()


flutter组件之GridView.builder()_javascript

如果您的 Flutter 应用程序需要显示大量或无限数量项目的网格视图(例如,从 API 获取的产品列表),那么您应该使用GridView.builder()而不是GridView()。该**生成器()**只为那些确实可见,所以您的应用程序的性能将得到改善

例子

步骤:

  1. 生成一个包含 100.000 个虚拟产品的列表:

final List<Map> myProducts =
      List.generate(100000, (index) => {"id": index, "name": "Product $index"})
          .toList();

通过使用GridView.builder(),我们将在渲染像这样的超大列表时摆脱滞后。

2.实现网格视图:

GridView.builder(
            gridDelegate: SliverGridDelegateWithMaxCrossAxisExtent(
                maxCrossAxisExtent: 200,
                childAspectRatio: 3 / 2,
                crossAxisSpacing: 20,
                mainAxisSpacing: 20),
            itemCount: myProducts.length,
            itemBuilder: (BuildContext ctx, index) {
              return Container(
                alignment: Alignment.center,
                child: Text(myProducts[index]["name"]),
                decoration: BoxDecoration(
                    color: Colors.amber,
                    borderRadius: BorderRadius.circular(15)),
              );
            }),

截屏:

flutter组件之GridView.builder()_ci_02

img

完整代码

main.dart 中的完整源代码:

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      // Hide the debug banner
      debugShowCheckedModeBanner: false,
      title: 'Kindacode.com',
      home: HomeScreen(),
    );
  }
}

class HomeScreen extends StatelessWidget {
  final List<Map> myProducts =
      List.generate(100000, (index) => {"id": index, "name": "Product $index"})
          .toList();

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Kindacode.com'),
      ),
      body: Padding(
        padding: const EdgeInsets.all(8.0),
        child: GridView.builder(
            gridDelegate: SliverGridDelegateWithMaxCrossAxisExtent(
                maxCrossAxisExtent: 200,
                childAspectRatio: 3 / 2,
                crossAxisSpacing: 20,
                mainAxisSpacing: 20),
            itemCount: myProducts.length,
            itemBuilder: (BuildContext ctx, index) {
              return Container(
                alignment: Alignment.center,
                child: Text(myProducts[index]["name"]),
                decoration: BoxDecoration(
                    color: Colors.amber,
                    borderRadius: BorderRadius.circular(15)),
              );
            }),
      ),
    );
  }
}

结论

恭喜!在这一点上,您应该对在您的应用程序中实现 GridView 有更好的理解并感到更自在

最后

这里也为想要学习Flutter的朋友们准备了两份学习资料《Flutter Dart语言编程入门到精通》《Flutter实战》,从编程语言到项目实战,一条龙服务!!

《Flutter Dart 语言编程入门到精通》

  • 第一章 Dart语言基础
  • 第二章 Dart 异步编程
  • flutter组件之GridView.builder()_flutter_03

  • 第三章 异步之 Stream 详解
  • 第四章 Dart标准输入输出流
  • flutter组件之GridView.builder()_javascript_04

  • 第五章 Dart 网络编程
  • 第六章 Flutter 爬虫与服务端
  • flutter组件之GridView.builder()_ci_05

  • 第七章 Dart 的服务端开发
  • 第八章 Dart 调用C语言混合编程
  • 第九章 LuaDardo中Dart与Lua的相互调用
  • flutter组件之GridView.builder()_Dart_06

《Flutter实战:第二版》

  • 第一章:起步
  • 第二章:第一个Flutter应用
  • 第三章:基础组件
  • 第四章:布局类组件
  • 第五章:容器类组件

flutter组件之GridView.builder()_flutter_07

  • 第六章:可滚动组件
  • 第七章:功能型组件
  • 第八章:事件处理与通知
  • 第九章:动画
  • 第十章:自定义组件
  • flutter组件之GridView.builder()_开发语言_08

  • 第十一章:文件操作与网络请求
  • 第十二章:Flutter扩展
  • 第十三章:国际化
  • 第十四章:Flutter核心原理
  • 第十五章:一个完整的Flutter应用
  • flutter组件之GridView.builder()_javascript_09


举报

相关推荐

0 条评论