Flutter中网格布局GridView的用法

最新推荐文章于 2025-11-14 15:35:48 发布

原创

最新推荐文章于 2025-11-14 15:35:48 发布 · 825 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#flutter #GridView

文章展示了如何使用Flutter的GridView.extent和GridView.count构建不同布局的网格视图。GridView.extent通过maxCrossAxisExtent属性限制横轴子元素的最大长度，而GridView.count则通过crossAxisCount设定每行显示的Widget数量。此外，还演示了如何加载动态数据到GridView.builder中。

GridView.extent()与 GridView.count()

GridView.extent中设置maxCrossAxisExtent属性代表横轴子元素的最大长度,通过它可以快速的创建横轴子元素为固定最大长度的GridView

@override
  Widget build(BuildContext context) {
    return GridView.extent(
      //横轴子元素的最大长度,通过它可以快速的创建横轴子元素为固定最大长度的GridView
      maxCrossAxisExtent: 130,
      //水平子Widget之间间距
      crossAxisSpacing: 10,
      //垂直子Widget之间间距
      mainAxisSpacing: 10,
      //外边距
      padding: const EdgeInsets.all(10),
      //宽高比
      childAspectRatio: 0.7,
      //数据
      children: _initGridViewData(),
    );
  }

完整代码

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      theme: ThemeData(primarySwatch: Colors.blue),
      home: Scaffold(
        appBar: AppBar(
          title: const Text("Flutter"),
        ),
        body: const MyHomePage(),
      ),
    );
  }
}

class MyHomePage extends StatelessWidget {
  const MyHomePage({Key? key}) : super(key: key);

  List<Widget> _initGridViewData() {
    List<Widget> tempList = [];
    for (var i = 0; i < 12; i++) {
      tempList.add(Container(
        alignment: Alignment.center,
        decoration: BoxDecoration(
          color: Colors.blue,
          //圆角设置
          borderRadius: BorderRadius.circular(16),
        ),
        child: Text(
          "第${i + 1}元素",