Flutter 基础控件 ListView

最新推荐文章于 2021-05-30 21:18:02 发布

路和远方

最新推荐文章于 2021-05-30 21:18:02 发布

阅读量136

点赞数

分类专栏： Flutter 文章标签：基础控件

本文链接：https://blog.csdn.net/shuzhuchengfu/article/details/101445852

版权

Flutter 专栏收录该内容

31 篇文章 2 订阅

订阅专栏

Flutter 基础控件 ListView

简单使用

/// ListView 简单案例
class ListViewDemo extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return ListView(
      children: <Widget>[
        ListTile(leading: Icon(Icons.print, color: Colors.red,),
          title: Text("第一行", style: TextStyle(color: Colors.red),),),
        ListTile(leading: Icon(Icons.cast, color: Colors.green,),
          title: Text("第二行", style: TextStyle(color: Colors.green),),),
        ListTile(leading: Icon(Icons.map, color: Colors.blue,),
          title: Text("第三行", style: TextStyle(color: Colors.blue),),),
        Image.network("https://www.baidu.com/img/baidu_jgylogo3.gif")
      ],
    );
  }
}

横向列表

///横向 ListView 
class HorizontalListView extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Container(
      height: 200,
      child: ListView(
        scrollDirection: Axis.horizontal, // 横向滑动
        children: <Widget>[
          Container(
            width: 200,
            color: Colors.red,
          ),
          Container(
            width: 200,
            color: Colors.green,
          ),
          Container(
            width: 200,
            color: Colors.blue,
          ), Container(
            width: 200,
            color: Colors.yellow,
          )
        ],
      ),
    );
  }
}

动态设置列表数据

/// 动态列表
class DynamicListView extends StatelessWidget {
  final List<String> items;

  DynamicListView({@required this.items});

  @override
  Widget build(BuildContext context) {
    // 构造数组
    return ListView.builder(
        itemCount: items.length, // 列表的总个数
        itemBuilder: (context, index) {
          return ListTile(
            title: Text(items[index], textAlign: TextAlign.center,),
          );
        });
  }
}

GridView 简单的案例

/// 简单的案例
class GridViewDemo extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return GridView.count(
      crossAxisCount: 3,
      // 列间距
      crossAxisSpacing: 10,
      // 行间距
      mainAxisSpacing: 10,
      // 子控件 宽高比
      childAspectRatio: 0.5,
      padding: EdgeInsets.all(20),
      children: <Widget>[
        Container(
          alignment: Alignment.center,
          child: Text("第一个"),
          color: Colors.yellow,
        ),
        Container(
          alignment: Alignment.center,
          child: Text("第二个"),
          color: Colors.yellow,
        ),
        Container(
          alignment: Alignment.center,
          child: Text("第三个"),
          color: Colors.yellow,
        ),
        Container(
          alignment: Alignment.center,
          child: Text("第四个"),
          color: Colors.yellow,
        ),
        Container(
          alignment: Alignment.center,
          child: Text("第五个"),
          color: Colors.yellow,
        ),
        Container(
          alignment: Alignment.center,
          child: Text("第六个"),
          color: Colors.yellow,
        ),
        Container(
          alignment: Alignment.center,
          child: Text("第七个"),
          color: Colors.yellow,
        ),
        Container(
          alignment: Alignment.center,
          child: Text("第八个"),
          color: Colors.yellow,
        ),
      ],
    );
  }
}