flutter 九宫格布局

2020-08-25  本文已影响0人  喜剧收尾_XWX
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(),
        ),
      ),
    );
  }
}
上一篇 下一篇

猜你喜欢

热点阅读