Flutter实现网格布局1

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

清风99w

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

阅读量599

点赞数 2

分类专栏： Flutter

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

版权

Flutter 专栏收录该内容

53 篇文章 3 订阅

订阅专栏

上一次有人在问是否可以用Grid布局，可以。
上一次的做法：
链接: link.
效果图：
在这里插入图片描述
提示一下部分代码的意思;

实现方式：GridView.count
实现代码如下：

import 'package:flutter/material.dart';

class GridPage extends StatelessWidget {
  Widget centreSection() {
    return Container(
      height: 300,
      child: GridView(
        gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
          crossAxisCount: 3, //每一行的列数
          mainAxisSpacing: 10, //主轴方向上的间距
          crossAxisSpacing: 10, //交叉轴轴方向上的间距
          childAspectRatio: 1.2, //子元素的宽高比例
        ),
        children: [
          Container(
            decoration: BoxDecoration(
              image: DecorationImage(
                image: AssetImage('images/beauty1.png'),
              ),
            ),
            child: Text(
              "美少女1号",
            ),
            alignment: Alignment.bottomCenter,
          ),
          Container(
            decoration: BoxDecoration(
              image: DecorationImage(
                image: AssetImage('images/beauty1.png'),
              ),
            ),
            child: Text(
              "美少女1号",
            ),
            alignment: Alignment.bottomCenter,
          ),
          Container(
            decoration: BoxDecoration(
              image: DecorationImage(
                image: AssetImage('images/beauty1.png'),
              ),
            ),
            child: Text(
              "美少女1号",
            ),
            alignment: Alignment.bottomCenter,
          ),
          Container(
            decoration: BoxDecoration(
              image: DecorationImage(
                image: AssetImage('images/beauty2.png'),
              ),
            ),
            child: Text(
              "美少女2号",
            ),
            alignment: Alignment.bottomCenter,
          ),
          Container(
            decoration: BoxDecoration(
              image: DecorationImage(
                image: AssetImage('images/beauty2.png'),
              ),
            ),
            child: Text(
              "美少女2号",
            ),
            alignment: Alignment.bottomCenter,
          ),
          Container(
            decoration: BoxDecoration(
              image: DecorationImage(
                image: AssetImage('images/beauty2.png'),
              ),
            ),
            child: Text(
              "美少女2号",
            ),
            alignment: Alignment.bottomCenter,
          ),
        ],
      ),
    );
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("甜宠软妹"),
        centerTitle: true,
      ),
      body: Container(padding: EdgeInsets.all(10.0), child: centreSection()),
    );
  }
}