美文网首页
22.GridView.build

22.GridView.build

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

    和ListView一样,使用构造函数会一次性创建所有的子Widget,会带来性能问题,所以我们可以使用GridView.build来交给GridView自己管理需要创建的子Widget。

    我们直接使用之前的数据来进行代码演练:

    class_GridViewBuildDemoStateextendsState{

      List<Anchor> anchors = [];

      @override

      void initState() {

        getAnchors().then((anchors) {

          setState(() {

            this.anchors = anchors;

          });

        });

        super.initState();

      }

      @override

      Widget build(BuildContext context) {

        return Padding(

          padding: const EdgeInsets.all(8.0),

          child: GridView.builder(

            shrinkWrap: true,

            physics: ClampingScrollPhysics(),

            gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(

              crossAxisCount: 2,

              mainAxisSpacing: 10,

              crossAxisSpacing: 10,

              childAspectRatio: 1.2

            ),

            itemCount: anchors.length,

            itemBuilder: (BuildContext context, int index) {

              return Container(

                child: Column(

                  crossAxisAlignment: CrossAxisAlignment.start,

                  children: <Widget>[

                    Image.network(anchors[index].imageUrl),

                    SizedBox(height: 5),

                    Text(anchors[index].nickname, style: TextStyle(fontSize: 16),),

                    Text(anchors[index].roomName, maxLines: 1, overflow: TextOverflow.ellipsis,)

                  ],

                ),

              );

            }

          ),

        );

      }

    }

    相关文章

      网友评论

          本文标题:22.GridView.build

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