Flutter实现网格布局3

最新推荐文章于 2024-07-10 22:29:18 发布

清风99w

最新推荐文章于 2024-07-10 22:29:18 发布

阅读量642

点赞数 1

分类专栏： Flutter

本文链接：https://blog.csdn.net/weixin_45425105/article/details/110536676

版权

Flutter 专栏收录该内容

53 篇文章 3 订阅

订阅专栏

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

（2）实现要点：

循环遍历很多数量的图片用到了list
图片尽可能的小，方便快速加载
GridView主要用于实现商品列表
给widget设置高度无用，它会自适应（滚动加载所有图片）
SizeBox实现文字图片的间距

（3）实现代码：

import 'package:flutter/material.dart';
import 'listData.dart';

class GridPage extends StatelessWidget {
  List<Widget> _getListData() {
    var tempList = listData.map((value) {
      return Container(
        child: Column(
          children: <Widget>[
            Image.asset(value["imageUrl"]),
            SizedBox(
              height: 12
            ),
            Text(value["title"],
            textAlign: TextAlign.center,
            style: TextStyle(
              fontSize: 20.0
            ),),
          ],
        ),
        decoration: BoxDecoration(
          border: Border.all(color: Color.fromRGBO(233, 233, 233, 0.9),
          width: 1
          )
        ),
      );
    });
    return tempList.toList();
  }
  Widget centerSection() {
    return GridView.count(
      crossAxisSpacing: 10.0,
      mainAxisSpacing: 10.0,
      padding: EdgeInsets.all(10),
      crossAxisCount: 2,
      children: this._getListData(),
    );
  }
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text("甜宠软妹"),
      centerTitle: true,),
      body: centerSection(),
    );
  }
}

listData.dart文件里面的代码

List listData = [{
  "title":"icecream",
  "author":"candy",
  "imageUrl":"images/candy.png",
},
{
  "title":"icecream",
  "author":"candy",
  "imageUrl":"images/candy.png",
},
{
  "title":"icecream",
  "author":"candy",
  "imageUrl":"images/candy.png",
},
{
  "title":"icecream",
  "author":"candy",
  "imageUrl":"images/candy.png",
},
{
  "title":"icecream",
  "author":"candy",
  "imageUrl":"images/candy.png",
},
{
  "title":"icecream",
  "author":"candy",
  "imageUrl":"images/candy.png",
},
{
  "title":"icecream",
  "author":"candy",
  "imageUrl":"images/candy.png",
},
{
  "title":"icecream",
  "author":"candy",
  "imageUrl":"images/candy.png",
},
{
  "title":"icecream",
  "author":"candy",
  "imageUrl":"images/candy.png",
},
{
  "title":"icecream",
  "author":"candy",
  "imageUrl":"images/candy.png",
},
{
  "title":"icecream",
  "author":"candy",
  "imageUrl":"images/candy.png",
},
{
  "title":"icecream",
  "author":"candy",
  "imageUrl":"images/candy.png",
},
{
  "title":"icecream",
  "author":"candy",
  "imageUrl":"images/candy.png",
},
];