GridView

最新推荐文章于 2024-04-04 09:21:01 发布

computerclass

最新推荐文章于 2024-04-04 09:21:01 发布

阅读量82

点赞数

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

本文链接：https://blog.csdn.net/computerclass/article/details/115288592

版权

flutter 专栏收录该内容

220 篇文章 1 订阅

订阅专栏

这个示例展示了如何在Flutter应用中使用GridView来创建一个2列的网格布局，展示了一系列彩色文本块。GridView.count配置了间距和单元格数量，并通过GridView.builder动态加载数据。数据来源于一个Product列表，每个Product包含图片、标题等信息。

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

GridView

可以以类似表格形式显示内容

GridView.count(
  primary: false,
  padding: const EdgeInsets.all(20),
  crossAxisSpacing: 10,
  mainAxisSpacing: 10,
  crossAxisCount: 2,
  children: <Widget>[
    Container(
      padding: const EdgeInsets.all(8),
      child: const Text("He'd have you all unravel at the"),
      color: Colors.teal[100],
    ),
    Container(
      padding: const EdgeInsets.all(8),
      child: const Text('Heed not the rabble'),
      color: Colors.teal[200],
    ),
    Container(
      padding: const EdgeInsets.all(8),
      child: const Text('Sound of screams but the'),
      color: Colors.teal[300],
    ),
    Container(
      padding: const EdgeInsets.all(8),
      child: const Text('Who scream'),
      color: Colors.teal[400],
    ),
    Container(
      padding: const EdgeInsets.all(8),
      child: const Text('Revolution is coming...'),
      color: Colors.teal[500],
    ),
    Container(
      padding: const EdgeInsets.all(8),
      child: const Text('Revolution, they...'),
      color: Colors.teal[600],
    ),
  ],
)

一般会从外边获取数据，在网格布局中显示内容，下面是完整的代码段。

import 'package:flutter/material.dart';
import 'package:gridviewdemo/product.dart';

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

class MyApp extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  MyHomePage({Key? key, required this.title}) : super(key: key);

  final String title;

  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: GridView.builder(
          padding: EdgeInsets.all(10),
          itemCount: productList.length,
          gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
            crossAxisCount: 2,
            crossAxisSpacing: 10,
            mainAxisSpacing: 5,
            childAspectRatio: 1,
          ),
          itemBuilder: (context, index) {
            return GridViewItem(images: productList[index].image);
          }),
    );
  }

  // List<Widget> _getGridList() {
  //   return productList.map((item) {
  //     return GridViewItem(images: item.image);
  //   }).toList();
  // }
}

class GridViewItem extends StatelessWidget {
  final String images;

  const GridViewItem({Key? key, required this.images}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Container(
      child: Row(
        children: [
          Image.asset(
            images,
            width: 190,
            height: 200,
            fit: BoxFit.cover,
          ),
        ],
      ),
    );
  }
}

class Product {
  final String image;
  final String title;
  final int count;
  final String updateDateTime;
  final int score;

  Product(this.image, this.title, this.count, this.updateDateTime, this.score);
}

var productList = [
  Product("images/3in1.png", "三合一数据线", 100, "2020-01-06 06：05：20", 3600),
  Product("images/mouse.png", "鼠标垫", 300, "2020-01-06 06：05：20", 2800),
  Product("images/lamp.png", "多功能小夜灯", 600, "2020-01-06 06：05：20", 6300),
  Product("images/bag.png", "背包", 500, "2020-01-06 06：05：20", 1200),
  Product("images/sunshine.png", "食品", 710, "2020-01-06 06：05：20", 3600),
  Product("images/3in1.png", "三合一数据线", 650, "2020-01-06 06：05：20", 3600),
  Product("images/mouse.png", "鼠标垫", 200, "2020-01-06 06：05：20", 2800),
  Product("images/lamp.png", "多功能小夜灯", 400, "2020-01-06 06：05：20", 6300),
  Product("images/bag.png", "背包", 360, "2020-01-06 06：05：20", 1200),
  Product("images/sunshine.png", "食品", 330, "2020-01-06 06：05：20", 3600),
];