Flutter-ListView

最新推荐文章于 2023-10-31 07:00:00 发布

ClearLiang

最新推荐文章于 2023-10-31 07:00:00 发布

阅读量363

点赞数

CC 4.0 BY-SA版权

分类专栏： Flutter 文章标签： Flutter

本文链接：https://blog.csdn.net/qq_33488315/article/details/90794235

Flutter 专栏收录该内容

10 篇文章

订阅专栏

Flutter组件之ListView

ListView的使用分为静态和动态：

静态：固定写死的ListView
动态：从外部动态获取数据显示在List

静态

简介：直接建立ListView并填写好参数

必选

1. children => List<Widget>  组件数组

可选

1. scrollDirection 	=> Axis					滚动方向（水平还是垂直）默认垂直
2. padding			=> EdgeInsetsGeometry	内边距（与scrollDirection同向的padding，
											只有头和尾才有边距，即滚动时头部的padding会“滚走”）

例子

class MyList1 extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return new ListView(
      padding: EdgeInsets.fromLTRB(10.0, 10.0, 10.0, 10.0),
      scrollDirection: Axis.horizontal,
      children: <Widget>[
        new Container(
          width: 100.0,
          color: Colors.red,
        ),
        new Container(
          width: 100.0,
          color: Colors.orange,
        ),
        new Container(
          width: 100.0,
          color: Colors.yellow,
        ),
        new Container(
          width: 100.0,
          color: Colors.green,
        ),
        new Container(
          width: 100.0,
          color: Colors.blue,
        )
      ],
    );
  }
}

动态

简介：采用Builder的模式创建组件

必选

1. itemBuilder => List<Widget>  组件数组

可选

1. itemCount 		=> int					列表的item数量
2. padding			=> EdgeInsetsGeometry	内边距（与scrollDirection同向的padding，
											只有头和尾才有边距，即滚动时头部的padding会“滚走”）
3. scrollDirection 	=> Axis					滚动方向（水平还是垂直）默认垂直

例子

class MyList extends StatelessWidget {
  //接收传入参数所需要的设置
  final List<String> data;
  MyList({Key key, @required this.data}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return new ListView.builder(
      itemCount: data.length,
      itemBuilder: (context, index) {
        return new ListTile(
          title: new Text("${data[index]}"),
        );
      },
    );
  }
}

使用：
items: new List<String>.generate(100, (i) => "item $i")
MyList(data: items)//items为list数组数据