Flutter(Widget)-列表组件

截屏2022-07-06 15.31.13.png

1.ListView 水平和垂直滑动 ListView.builder  ListView:children

截屏2022-07-06 10.41.33.png
图像.gif

import 'package:flutter/material.dart';
class ZFLListViewWidget extends StatefulWidget {
  @override
  _ZFLListViewWidgetState createState() => _ZFLListViewWidgetState();
}

class _ZFLListViewWidgetState extends State<ZFLListViewWidget> {
  @override
  Widget build(BuildContext context) {
    return Container(
      child: _listOneWidget(),
    );
  }

  _listOneWidget() {//垂直
    return Scaffold(
      appBar: AppBar(
        title: Text('列表'),
      ),
      body: Container(
        color: Colors.white,
        child: ListView(
          padding:EdgeInsets.fromLTRB(0, 10, 0, 10),
          children: [
            ListTile(
              title: Text(
                '我是标题标题我是标题标题',
                style: TextStyle(fontSize: 12),
              ),
              subtitle: Text('中国天气网讯 21日开始，北方今年首轮大范围高温拉开序幕，昨天是高温发展的最鼎盛阶段'),
            ),
            _lineWidget(),
            ListTile(
              leading: Image.network('https://www.itying.com/images/flutter/1.png'),
              title: Text(
                '中国13家运营波音737MAX航空公司均已提出索赔场',
                style: TextStyle(fontSize: 12),
              ),
              subtitle: Text("中国天气网讯 21日开始，北方今年首轮大范围高温拉开序幕，昨天是高温发展的最鼎盛阶段"),
            ),
            _lineWidget(),
            ListTile(
              leading:Icon(Icons.call),
              title: Text(
                '我是标题标题我是标题标题',
                style: TextStyle(fontSize: 12),
              ),
              subtitle: Text('中国天气网讯 21日开始，北方今年首轮大范围高温拉开序幕，昨天是高温发展的最鼎盛阶段'),
            ),
            _lineWidget(),
            ListTile(
              trailing: Image.network('https://www.itying.com/images/flutter/1.png'),
              title: Text(
                '中国13家运营波音737MAX航空公司均已提出索赔场',
                style: TextStyle(fontSize: 12),
              ),
              subtitle: Text("中国天气网讯 21日开始，北方今年首轮大范围高温拉开序幕，昨天是高温发展的最鼎盛阶段"),
            ),
            _lineWidget(),

            Container(
              padding: EdgeInsets.only(left: 16,right: 16,top: 16,),
              child:Image.network("https://www.itying.com/images/flutter/1.png"),
            ),
            Container(
              padding: EdgeInsets.only(left: 16,right: 16,top: 16,),
              child:Image.network("https://www.itying.com/images/flutter/1.png"),
            ),
            Container(
              padding: EdgeInsets.only(left: 16,right: 16,top: 16,),
              child:Image.network("https://www.itying.com/images/flutter/1.png"),
            ),

          ],
        ),
      ),
    );
  }

  _listhWidget() {//水平
    return Scaffold(
      appBar: AppBar(
        title: Text('列表'),
      ),
      body: Container(
        height: 200,
        color: Colors.white,
        padding: EdgeInsets.all(0),
        child: ListView(
          scrollDirection: Axis.horizontal,
          padding: EdgeInsets.all(0),
          children: [
            Container(
              width: MediaQuery.of(context).size.width,
              height: 200,
              color: Colors.orange,
              child: ListView(
                children: [
                  Text('我是一个文本'),
                  Image.network("https://www.itying.com/images/flutter/1.png"),
                ],
              ),
            ),
            Container(
              width: MediaQuery.of(context).size.width,
              child:Image.network("https://www.itying.com/images/flutter/1.png",fit:BoxFit.fill,),
            ),
            Container(
              width: MediaQuery.of(context).size.width,
              child:Image.network("https://www.itying.com/images/flutter/1.png",fit:BoxFit.fill,),
            ),
            Container(
              width: MediaQuery.of(context).size.width,
              child:Image.network("https://www.itying.com/images/flutter/1.png",fit:BoxFit.fill,),
            ),


          ],
        ),
      ),
    );
  }

//listview 动态数据
  List listData = [{
    'title' :'title1',
    'imageUrl':'https://www.itying.com/images/flutter/1.png',
    'author':'作者'
  }];

  _buildListView(){
    return ListView.builder(itemCount: listData.length,itemBuilder: (context,index){
      return ListTile(
          title: Text(listData[index]["title"]),
          leading:Image.network(listData[index]["imageUrl"]),
          subtitle:Text(listData[index]["author"])
      );
    });
  }
  _lineWidget() {
    return Container(color: Color(0xFFE6E7EC), height: 1);
  }


}

2.网格 GridView  GridView.count.  GridView.build

截屏2022-07-06 15.14.12.png

class ZFLGridWidget extends StatefulWidget {
  @override
  _ZFLGridWidgetState createState() => _ZFLGridWidgetState();
}

class _ZFLGridWidgetState extends State<ZFLGridWidget> {
  List listData = [
    {
      'title': 'title1',
      'imageUrl1': 'https://www.itying.com/images/flutter/1.png',
      'imageUrl': 'https://www.itying.com/images/flutter/2.png',
      'author': '作者'
    },
    {
      'title': 'title1',
      'imageUrl1': 'https://www.itying.com/images/flutter/1.png',
      'imageUrl': 'https://www.itying.com/images/flutter/2.png',
      'author': '作者'
    },
    {
      'title': 'title1',
      'imageUrl': 'https://www.itying.com/images/flutter/1.png',
      'imageUrl1': 'https://www.itying.com/images/flutter/2.png',
      'author': '作者'
    },
    {
      'title': 'title2',
      'imageUrl': 'https://www.itying.com/images/flutter/1.png',
      'imageUrl1': 'https://www.itying.com/images/flutter/2.png',
      'author': '作者'
    },
    {
      'title': 'title1',
      'imageUrl': 'https://www.itying.com/images/flutter/1.png',
      'imageUrl1': 'https://www.itying.com/images/flutter/2.png',
      'author': '作者'
    },
    {
      'title': 'title1',
      'imageUrl': 'https://www.itying.com/images/flutter/1.png',
      'imageUrl1': 'https://www.itying.com/images/flutter/2.png',
      'author': '作者'
    }
  ];

  @override
  Widget build(BuildContext context) {
    //crossAxisCount 一行的widget的数量。
    //crossAxisSpacing  mainAxisSpacing 元素之间的距离。
    //GridView.count
    return Container(
      padding: EdgeInsets.only(left: 10, right: 10),
      child: gridViewBuildWidget(),
    );
  }

  gridViewCountWidget(){
    return GridView.count(
      crossAxisCount: 3,
      crossAxisSpacing: 10,
      mainAxisSpacing: 10,
      childAspectRatio: 0.7,
      children: gridChildWidget(),
    );
  }

  gridViewBuildWidget(){
    return GridView.builder(
       gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
         crossAxisCount: 3,
         crossAxisSpacing: 10,
         mainAxisSpacing: 10,
         childAspectRatio: 0.7,
       ),
      itemCount: listData.length,
      itemBuilder: (BuildContext context, int index) {
        return Container(
          alignment: Alignment.center,
          decoration: BoxDecoration(
              color: Colors.white24,
              border: Border.all(
                  color: Color.fromRGBO(233, 233, 233, 0.6), width: 1)),

          child: Container(
            child: Column(
              children: [
                AspectRatio(
                  aspectRatio: 8 / 9,
                  child: Image.network(
                    '${listData[index]['imageUrl']}',
                    fit: BoxFit.fill,
                  ),
                ),
                SizedBox(height: 5),
                Text(
                  '${listData[index]['title']}',
                  style: TextStyle(fontSize: 16),
                )
              ],
            ),
          ),
        );
      },
    );
  }

  gridChildWidget1() {
    return [
      ListTile(),
      Text('${listData[0]['title']}'),
      Text('${listData[0]['title']}'),
      Text('${listData[0]['title']}'),
    ];
  }

  gridChildWidget() {
    return listData.map((element) {
      return Container(
        alignment: Alignment.center,
        decoration: BoxDecoration(
            color: Colors.white24,
            border: Border.all(
                color: Color.fromRGBO(233, 233, 233, 0.6), width: 1)),

        child: Container(
          child: Column(
            children: [
              AspectRatio(
                aspectRatio: 8 / 9,
                child: Image.network(
                  '${element['imageUrl']}',
                  fit: BoxFit.fill,
                ),
              ),
              SizedBox(height: 5),
              Text(
                '${element['title']}',
                style: TextStyle(fontSize: 16),
              )
            ],
          ),
        ),
      );
    }).toList();
  }
}