美文网首页
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 九宫格布局

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