美文网首页
9.GridView常用的创建方法

9.GridView常用的创建方法

作者: 凯司机 | 来源:发表于2020-06-06 18:25 被阅读0次

    import 'package:flutter/material.dart';

    main() => runApp(KSJMyApp());

    class KSJMyAppextends StatelessWidget {

    @override

    Widget build(BuildContext context) {

    return MaterialApp(

    home: MyApp(),

        );

      }

    }

    class MyAppextends StatelessWidget {

    @override

    Widget build(BuildContext context) {

    return Scaffold(

    appBar: AppBar(

    title: Text('KSJ'),

          ),

          body: NewCountGridViewNewWidget(),

          floatingActionButton: FloatingActionButton(

    child: Icon(Icons.add),

              onPressed: () {

    print("+++");

              }),

          floatingActionButtonLocation: FloatingActionButtonLocation.centerFloat,

        );

      }

    }

    class NewCountGridViewNewWidgetextends StatelessWidget {

    const NewCountGridViewNewWidget({

    Key key,

      }) :super(key: key);

      @override

    Widget build(BuildContext context) {

    return GridView.count(

    crossAxisCount:9,

          crossAxisSpacing:5,

          mainAxisSpacing:10,

          children: List.generate(100, (index) {

    return Container(

    color: index %2 ==0 ? Colors.red : Colors.blue,

            );

          }),

        );

      }

    }

    class GridViewMaxExtentNewWidgetextends StatelessWidget {

    const GridViewMaxExtentNewWidget({

    Key key,

      }) :super(key: key);

      @override

    Widget build(BuildContext context) {

    return GridView(

    padding: EdgeInsets.symmetric(horizontal:8, vertical:5),

          gridDelegate: SliverGridDelegateWithMaxCrossAxisExtent(

    maxCrossAxisExtent:100,

              mainAxisSpacing:10,

              crossAxisSpacing:20,

              childAspectRatio:0.5),

          children: List.generate(1000, (index) {

    return Container(

    color: index %2 ==0 ? Colors.red : Colors.blue,

            );

          }),

        );

      }

    }

    class GridViewDemo1NewWidgetextends StatelessWidget {

    const GridViewDemo1NewWidget({

    Key key,

      }) :super(key: key);

      @override

    Widget build(BuildContext context) {

    return GridView(

    // 以自身宽度为基准

    //        gridDelegate: SliverGridDelegateWithMaxCrossAxisExtent(maxCrossAxisExtent: 35),

    // 以Item个数为基准

          padding: EdgeInsets.symmetric(horizontal:8, vertical:5),

          gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(

    crossAxisCount:5,

            mainAxisSpacing:5,

            crossAxisSpacing:5,

            childAspectRatio:0.1,

          ),

          children: List.generate(1000, (index) {

    return Container(

    color: index %2 ==0 ? Colors.red : Colors.blue,

            );

          }),

        );

      }

    }

    相关文章

      网友评论

          本文标题:9.GridView常用的创建方法

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