Flutter - ListView（4）

列表组件 (固定纵向List)

列表组件 (固定横向List)

列表组件 (动态纵向List)

import 'package:flutter/material.dart';

void main () {
  runApp(myApp()); // 主入口
}

class myApp extends StatelessWidget {

  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return MaterialApp(
      title:'ListView Widget', 
      // 脚手架
      home:Scaffold( 
        appBar: AppBar(
          title: Text('ListView Widget'),
        ),

//      列表组件 (固定纵向List)
        //  body: verticallist()
        
//      列表组件 (固定横向List)    
        //  body: horizontalList()
        
//      列表组件 (动态纵向List)    
      // generate 生成函数 生成 100 个 item
        body: dList(items: (List<String>.generate(100, (i)=>"Item $i"))),
      )
    );
  }
}

// 纵向
class verticallist extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return ListView(
//          scrollDirection: Axis.horizontal, // 纵横向展示
          reverse: true, // 正倒序
          primary: false, // false，如果内容不足，则用户无法滚动 而如果[primary]为true，它们总是可以尝试滚动。
          itemExtent: 150, // 行高
          cacheExtent: 30.0,   // 设置预加载的区域 
          physics: ScrollPhysics(), //滑动类型设置
          shrinkWrap: false, //内容适配

          children: <Widget>[
            ListTile(
              leading: Icon(Icons.offline_bolt), // 最前面放一个图标
              title: Text('这个是个标题'), // 标题
              subtitle: Text('我是个子标题'), //
            ),

            ListTile(
              leading: Icon(Icons.hdr_on), // 最前面放一个图标
              title: Text('这个是第二个标题'),
              subtitle: Text('我是第r二个子标题'),
            ),

            Image(image: NetworkImage("https://i0.hdslb.com/bfs/archive/d9236084d43b7172877a76282ff98d7c66be23df.jpg"),fit: BoxFit.fill,),

            ListTile(
              leading: Icon(Icons.offline_bolt), // 最前面放一个图标
              title: Text('这个是第三个标题'),
              subtitle: Text('我是第三个子标题'),
            ),

            Image(image: NetworkImage("https://i0.hdslb.com/bfs/archive/d9236084d43b7172877a76282ff98d7c66be23df.jpg"),fit: BoxFit.fill,),
          ], 
        ) ;
  }
}

// 横向
class horizontalList extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return ListView(
      scrollDirection: Axis.horizontal, // 纵横展示
           children: <Widget>[
             Container(
               width: 100,
               color: Colors.orange,
             ),

             Container(
               width: 120,
               color: Colors.lightBlue,
             ),

              Container(
               width: 130,
               color: Colors.red,
             ),

              Container(
               width: 100,
               color: Colors.purple,
             ),
           ],
    );
  }
}


// 动态列表
class dList extends StatelessWidget {

  final List<String> items; // 声明一个属性

  dList({
    Key key,
    @required this.items}
  ):super(key:key);  // 这里就要这样写我也不知道

  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return ListView.builder(
      itemCount: items.length,  // list 条数
      itemBuilder: (context, index){  // 动态生成
        return ListTile(
          title: Text("hello xzp data ${items[index]}"),
        );
      });
  }
}

是我学习的第四个组件，记录一下吧

ListView ()

scrollDirection 纵横

例：   scrollDirection: Axis.horizontal, // 纵横展示
  horizontal, // 横
  vertical, // 纵

reverse 正倒排序

primary: false, // false，如果内容不足，则用户无法滚动而如果[primary]为true，它们总是可以尝试滚动。

itemExtent: 150, // 行高

cacheExtent: 30.0, // 设置预加载的区域

physics: ScrollPhysics(), //滑动类型设置没弄太明白

shrinkWrap: false, //内容适配

ListView.builder()

itemCount 行数

例如 itemCount: 4,

itemExtent 高度

例如 itemExtent: 40

itemBuilder 详情

例如 
itemBuilder: (context, index) {
            return ListTile(
              title: Text("$index"),
           );
},

addAutomaticKeepAlives

是否将子控件包裹在AutomaticKeepAlive控件内

addRepaintBoundaries

是否将子控件包裹在 RepaintBoundary 控件内。用于避免列表滚动时的重绘，如果子控件重绘开销很小时，比如子控件就是个色块或简短的文字，把这个字段设置为false性能会更好

addSemanticIndexes

是否把子控件包装在IndexedSemantics里，用来提供无障碍语义

最后编辑于：2020.05.12 16:14:22