美文网首页
flutter 九宫格布局

flutter 九宫格布局

作者: 喜剧收尾_XWX | 来源:发表于2020-08-25 10:30 被阅读0次
import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    List<Container> _buildGuidTitleList(int count) {
      return List<Container>.generate(
        count,
        (int index) => Container(
          child: Image.asset('images/${index + 1}.jpeg'),
        ),
      );
    }

    Widget buildGrid() {
      return GridView.extent(
        //次轴的宽度
        maxCrossAxisExtent: 150,
        //次轴的宽度
        padding: EdgeInsets.all(4.0),
        //上下左右的内边距
        mainAxisSpacing: 4.0,
        //主轴元素间距
        crossAxisSpacing: 4.0,
        //次轴元素间距
        children: _buildGuidTitleList(9), //添加
      );
    }

    return MaterialApp(
      title: "gridview九宫格",
      home: Scaffold(
        appBar: AppBar(
          title: Text("gridview九宫格"),
        ),
        body: Center(
          child: buildGrid(),
        ),
      ),
    );
  }
}

相关文章

  • flutter九宫格看图

    flutter九宫格图片 利用GridView实现布局,用Hero动画进行展示

  • Flutter 布局

    Flutter 布局详解 Flutter 布局(一)- Container详解 Flutter 布局(二)- Pa...

  • Flutter-布局

    一、介绍 flutter布局需要先了解flutter所有布局的widget,首先flutter布局分为Contai...

  • 详解自动布局(Masonry)实现九宫格

    以前写TimeLine中照片九宫格布局是直接计算frame,今天想用自动布局实现。 九宫格布局 使用自动布局,首先...

  • flutter 九宫格布局

  • Flutter-汇总

    Flutter(一)--Flutter安装遇到的问题汇总 Flutter(二)--布局机制、布局步骤、水平和垂直布...

  • Flutter旋转位移等操作

    flutter布局-5-Matrix4矩阵变换Flutter 布局(六)- SizedOverflowBox、Tr...

  • flutter布局-3-center

    Center 居中的布局 连载:flutter布局-1-column连载:flutter布局-2-row 只能有一...

  • OC_九宫格布局工具

    实现基于: iOS Masonry九宫格布局 - 一行代码实现九宫格 demo点这里 以后你可能会这样布局九宫格 ...

  • Flutter及Dart入门

    目录 Dart语言下的Flutter Flutter Widget Flutter 布局 Flutter 页面 路...

网友评论

      本文标题:flutter 九宫格布局

      本文链接:https://www.haomeiwen.com/subject/nkiydktx.html