flutter学习之基础组件（二）

flutter学习之基础组件（二）

本章学习ListVew列表组件，GridView网格组件 Flutter 中我们可以通过 ListView 来定义 列表项，支持垂直和水平方向展示。通过一个属性就可以控制列表的显示方向。列表有一下 分类： 1、垂直列表 2、垂直图文列表 3、水平列表 4、动态列表 5、矩阵式列表 1-4是Listview实现的，5是GridView实现的

---

一、ListView组件

1.参数

2.普通列表

/**
 * 普通列表使用
 */
class HomeContent extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return ListView(
      padding: EdgeInsets.all(5),
      children: <Widget>[
        ListTile(
          title: Text("listview标题演示"),
          subtitle: Text("二级标题演示1"),
          leading: Icon(
            Icons.wrong_location,
            color: Colors.yellow,
            size: 30,
          ),
          //图标
          trailing: Icon(
            Icons.wallet_giftcard_rounded,
            color: Colors.yellow,
            size: 30,
          ), //后面的图标
        ),
        ListTile(
          title: Text("网络图片"),
          subtitle: Text("二级标题演示2"),
          leading: Image.network(
              "https://pics4.baidu.com/feed/b151f8198618367a4e83cdc321f568d1b31ce536.jpeg?token=8961841436989fe3af737d06c3db0f83&s=B33BE06E8464C717150E41D80300F09A"), //图标
        ),
        ListTile(
          title: Text("listview标题演示"),
          subtitle: Text("二级标题演示3"),
          leading: Icon(Icons.home, color: Colors.yellow), //图标
        ),
        ListTile(
          title: Text("listview标题演示"),
          subtitle: Text("二级标题演示4"),
          leading: Icon(Icons.list, color: Colors.yellow), //图标
        ),
      ],
    );
  }
}

/**
 * 图文列表
 */
class HomeContents extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return ListView(
      padding: EdgeInsets.all(10),
      children: <Widget>[
        Image.network(
            "https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fpic3.zhimg.com%2Fv2-bdccac93dfee9fc078a7b21903fcc7fa_1200x500.jpg&refer=http%3A%2F%2Fpic3.zhimg.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1629441032&t=a755981fb31c97b8aa1c823102dfd02a"),
        Container(
          height: 40,
          child: Text(
            "我的一个标题",
            textAlign: TextAlign.center,
            style: TextStyle(fontSize: 24),
          ),
        ),
        Image.network(
            "https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fpic3.zhimg.com%2Fv2-bdccac93dfee9fc078a7b21903fcc7fa_1200x500.jpg&refer=http%3A%2F%2Fpic3.zhimg.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1629441032&t=a755981fb31c97b8aa1c823102dfd02a"),
        Container(
          height: 40,
          child: Text(
            "我的一个标题",
            textAlign: TextAlign.center,
            style: TextStyle(fontSize: 24),
          ),
        ),
        Image.network(
            "https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fpic3.zhimg.com%2Fv2-bdccac93dfee9fc078a7b21903fcc7fa_1200x500.jpg&refer=http%3A%2F%2Fpic3.zhimg.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1629441032&t=a755981fb31c97b8aa1c823102dfd02a"),
        Container(
          height: 40,
          child: Text(
            "我的一个标题",
            textAlign: TextAlign.center,
            style: TextStyle(fontSize: 24),
          ),
        ),
        Image.network(
            "https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fpic3.zhimg.com%2Fv2-bdccac93dfee9fc078a7b21903fcc7fa_1200x500.jpg&refer=http%3A%2F%2Fpic3.zhimg.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1629441032&t=a755981fb31c97b8aa1c823102dfd02a"),
        Container(
          height: 40,
          child: Text(
            "我的一个标题",
            textAlign: TextAlign.center,
            style: TextStyle(fontSize: 24),
          ),
        ),
        Image.network(
            "https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fpic3.zhimg.com%2Fv2-bdccac93dfee9fc078a7b21903fcc7fa_1200x500.jpg&refer=http%3A%2F%2Fpic3.zhimg.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1629441032&t=a755981fb31c97b8aa1c823102dfd02a"),
      ],
    );
  }
}

/**
 * 水平列表布局
 */
class ListViewContent extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Container(
      height: 160,
      child: ListView(
        scrollDirection: Axis.horizontal, //配置列表方向
        children: <Widget>[
          Container(
            width: 180,
            color: Colors.deepOrange,
            child: ListView(
              scrollDirection: Axis.vertical,
              children: <Widget>[
                Text("我是一个文本"),
                Image.network(
                    "https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fi2.wp.com%2Fsoftwareengineeringdaily.com%2Fwp-content%2Fuploads%2F2018%2F07%2FFlutterDart.png%3Fresize%3D730%2C389%26ssl%3D1&refer=http%3A%2F%2Fi2.wp.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1629441032&t=fc3739e3fd4571aa648c9230fc083315")
              ],
            ),
          ),
          Container(
            width: 180,
            color: Colors.blue,
          ),
          Container(
            width: 180,
            color: Colors.yellow,
          ),
          Container(
            width: 180,
            color: Colors.cyanAccent,
          ),
        ],
      ),
    );
  }
}

3.动态列表-加载外部数据

正常使用列表控件，不可能使用静态数据，肯定是通过接口获取，或者去列表循环添加

/**
 * 动态列表-自定义方法
 */
class ListViewContents extends StatelessWidget {
//自定义放大
  List<Widget> _getData() {
    List<Widget> list = [];
    for(int i =0;i<20;i++){
      list.add(ListTile(
        title: Text("我是一个列表$i"),
      ));
    }
    return list;
  }

  @override
  Widget build(BuildContext context) {
    return ListView(
      scrollDirection: Axis.vertical,
      children: this._getData(),
    );
  }
}

/**
 * 动态列表-加载外部列表数据
 */
class ListContents extends StatelessWidget {
//自定义放大
  List<Widget> _getData() {
    var tempList = listData.map((value){
      return ListTile(
        title: Text(value["title"]),
        subtitle: Text(value["author"]),
        leading: Image.network(value["imageUrl"]),
      );
    });
    return tempList.toList();
  }

  @override
  Widget build(BuildContext context) {
    return ListView(
      scrollDirection: Axis.vertical,
      children: this._getData(),
    );
  }
}

/**
 * 动态列表-ListView.builder加载数据
 */
class ListViewBuiderContents extends StatelessWidget {

  List<Widget> _list = [];
  ListViewBuiderContents(){
    for(int i =0;i<20;i++){
      _list.add(ListTile(
        title: Text("我是一个列表$i"),
      ));
    }
  }

  @override
  Widget build(BuildContext context) {
    return ListView.builder(
      itemCount: this._list.length,
        itemBuilder: (context,index){
          return this._list[index];
        }
    );
  }
}

/**
 * 动态列表-ListView.builder加载外部数据
 */
class ListViewBuiderContent extends StatelessWidget {

  Widget _weigth(context,index){
    return ListTile(
      title: Text(listData[index]["title"],
      style: TextStyle(
          color:Colors.deepOrange,
          fontSize: 16
      ),),
      subtitle: Text(listData[index]["author"]),
      leading: Image.network(listData[index]["imageUrl"]),
    );
  }

  @override
  Widget build(BuildContext context) {
    return ListView.builder(
        itemCount: listData.length,
        itemBuilder: (context,index){
          return _weigth(context,index);
        }
    );
  }
}

外部数据类：

List listData = [
  {
    "title": 'Candy Shop',
    "author": 'Mohamed Chahin',
    "imageUrl": 'https://img1.baidu.com/it/u=3487414028,2932761123&fm=26&fmt=auto&gp=0.jpg',
    "description":
        'Flutter is Google’s mobile UI framework for crafting high-quality native experiences on iOS and Android in record time. Flutter works with existing',
  },
  {
    "title": 'Childhood in a picture',
    "author": 'Google',
    "imageUrl": 'https://c-ssl.duitang.com/uploads/item/201511/19/20151119134615_U2FJK.thumb.1000_0.jpeg',
    "description":
        'Flutter is Google’s mobile UI framework for crafting high-quality native experiences on iOS and Android in record time. Flutter works with existing',
  },
  {
    "title": 'Alibaba Shop',
    "author": 'Alibaba',
    "imageUrl": 'https://c-ssl.duitang.com/uploads/item/201511/19/20151119134556_QtJAy.thumb.1000_0.jpeg',
    "description":
        'Dart is a client-optimized language for fast apps on any platform... Dart is a client-optimized language for fast apps on any platform Optimizedfor',
  },
  {
    "title": 'Candy Shop',
    "author": 'Mohamed Chahin',
    "imageUrl": 'https://c-ssl.duitang.com/uploads/item/201511/19/20151119134519_QduTJ.thumb.1000_0.jpeg',
    "description":
        'Dart is a client-optimized language for fast apps on any platform... Dart is a client-optimized language for fast apps on any platform Optimizedfor',
  },
  {
    "title": 'Tornado',
    "author": 'Mohamed Chahin',
    "imageUrl": 'https://c-ssl.duitang.com/uploads/item/201511/19/20151119134502_PYSRn.thumb.1000_0.jpeg',
    "description":
        'Flutter is Google’s mobile UI framework for crafting high-quality native experiences on iOS and Android in record time. Flutter works with existing',
  },
  {
    "title": 'Undo',
    "author": 'Mohamed Chahin',
    "imageUrl": 'https://c-ssl.duitang.com/uploads/item/201511/19/20151119134337_Pd5BA.thumb.1000_0.jpeg',
    "description":
        'Flutter is Google’s mobile UI framework for crafting high-quality native experiences on iOS and Android in record time. Flutter works with existing',
  },
  {
    "title": 'white-dragon',
    "author": 'Mohamed Chahin',
    "imageUrl": 'https://c-ssl.duitang.com/uploads/item/201511/19/20151119134402_RCdAm.thumb.1000_0.jpeg',
    "description":
        'Dart is a client-optimized language for fast apps on any platform... Dart is a client-optimized language for fast apps on any platform Optimizedfor',
  }
];

二、GridView 组件

1.常用属性

2.GridView基本使用

**
 * GridView基本使用
 */
class GridViewContent extends StatelessWidget {
  List<Widget> _getWidget() {
    List<Widget> list = [];
    for (int i = 1; i < 21; i++) {
      list.add(Container(
        // margin: EdgeInsets.all(5),
        decoration: BoxDecoration(
            color: Colors.blueAccent,
            border: Border.all(color: Colors.black),
            borderRadius: BorderRadius.all(Radius.circular(10))),
        alignment: Alignment.center,
        child: Text(
          "我是第$i条数据",
          style: TextStyle(fontSize: 18, color: Colors.red),
        ),
      ));
    }
    return list;
  }

  @override
  Widget build(BuildContext context) {
    return GridView.count(
      crossAxisCount: 3,
      mainAxisSpacing: 5,
      //设置上下间距
      crossAxisSpacing: 10,
      //设置左右间距
      padding: EdgeInsets.all(10),
      children: this._getWidget(),
      childAspectRatio: 0.7, //宽度和高度的比例
    );
  }
}

/**
 * 加载外部集合数据
 */
class GridViewContentes extends StatelessWidget {
  List<Widget> _getWidgetList() {
    var list = listData.map((value) {
      return Container(
        height: 300,
        // margin: EdgeInsets.all(5),
        decoration: BoxDecoration(
            color: Colors.blueAccent,
            border: Border.all(color: Colors.black),
            borderRadius: BorderRadius.all(Radius.circular(5))),
        alignment: Alignment.center,
        child: Column(
          children: <Widget>[
            Image.network(value["imageUrl"]),
            SizedBox(height: 5), //设置高度
            Text(
              value["title"],
              textAlign: TextAlign.center,
              maxLines: 1,
              overflow: TextOverflow.ellipsis,
              style: TextStyle(fontSize: 20),
            ),
          ],
        ),
      );
    });
    return list.toList();
  }

  @override
  Widget build(BuildContext context) {
    return GridView(
      gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
        crossAxisCount: 2,
        mainAxisSpacing: 5,
        crossAxisSpacing: 5,
      ),
      children: _getWidgetList(),
      padding: EdgeInsets.all(10),
    );
  }
}

3.GridView.count加载数据

/**
 * 加载外部数据--静态网格
 */
class GridViewContents extends StatelessWidget {
  List<Widget> _getWidgetList() {
    var list = listData.map((value) {
      return Container(
        height: 300,
        // margin: EdgeInsets.all(5),
        decoration: BoxDecoration(
            color: Colors.blueAccent,
            border: Border.all(color: Colors.black),
            borderRadius: BorderRadius.all(Radius.circular(5))),
        alignment: Alignment.center,
        child: Column(
          children: <Widget>[
            Image.network(value["imageUrl"]),
            SizedBox(height: 5), //设置高度
            Text(
              value["title"],
              textAlign: TextAlign.center,
              maxLines: 1,
              overflow: TextOverflow.ellipsis,
              style: TextStyle(fontSize: 20),
            ),
          ],
        ),
      );
    });
    return list.toList();
  }

  @override
  Widget build(BuildContext context) {
    return GridView.count(
      crossAxisCount: 2,
      mainAxisSpacing: 5,
      crossAxisSpacing: 5,
      padding: EdgeInsets.all(10),
      children: _getWidgetList(),
    );
  }
}

4.GridView.builder加载

/**
 * 加载外部数据-- GridViewBuilder
 */
class GridViewBuilderContents extends StatelessWidget {
  Widget _getWidget(context, index) {
    return Container(
      // margin: EdgeInsets.all(5),
      decoration: BoxDecoration(
          color: Colors.blueAccent,
          border: Border.all(color: Colors.black),
          borderRadius: BorderRadius.all(Radius.circular(5))),
      alignment: Alignment.center,
      child: Column(
        children: <Widget>[
          Image.network(listData[index]["imageUrl"]),
          SizedBox(height: 5), //设置高度
          Text(
            listData[index]["title"],
            textAlign: TextAlign.center,
            maxLines: 1,
            overflow: TextOverflow.ellipsis,
            style: TextStyle(fontSize: 20),
          ),
        ],
      ),
    );
  }

  @override
  Widget build(BuildContext context) {
    return GridView.builder(
      itemCount: listData.length,
      itemBuilder: this._getWidget,
      padding: EdgeInsets.all(10),
      gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
          crossAxisCount: 2,
          mainAxisExtent: 5,
          crossAxisSpacing: 5,
          childAspectRatio: 0.7),
    );
  }
}