前言

Flutter是Google开源的构建用户界面（UI）工具包，帮助开发者通过一套代码库高效构建多平台精美应用，支持移动、Web、桌面和嵌入式平台。Flutter 开源、免费，拥有宽松的开源协议，适合商业项目。目前，Flutter已推出稳定的2.0版本。也是目前最火的跨平台开发工具之一

header-illustration.png

ListView

顾名思义是列表组件，几乎每个引用都会用到，是很重要的组件

展示ListView

class _TestHomePageState extends State<TestHomePage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(
          title: Text(widget.title),
        ),
        body: ListView(
          children: [
            ContentItem(),
            ContentItem(),
            ContentItem(),
            ContentItem(),
          ]
        ));
  }
}

创建Item View

class ContentItem extends StatelessWidget{
  @override
  Widget build(BuildContext context) {
    return Container(
      height: 40,
      alignment: Alignment.center,
      child: Text('Text'),
    );
  }
}

list.png

动态懒加载数据

大部分时候数据量以及数据内容都是动态的，并且最好是经过优化的，像Android的ListView以及RecycleView都是通过自动复用机制去解决性能问题，Flutter中的ListView.builder可以在当滑动到需要显示这个item的时候再进行加载，但是并不存在复用机制，所以在特别长的列表滑动频繁还是会有内存问题

class _TestHomePageState extends State<TestHomePage> {
  List<String> data = ['张三', '李四', '王五', 'Mike'];

  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(
          title: Text(widget.title),
        ),
        body: ListView.builder(
          itemBuilder: (BuildContext context, int index) {
            print('----$index---');
            return ContentItem(data[index % data.length]);
          },
          itemCount: 100,
        ));
  }
}

class ContentItem extends StatelessWidget {
  String data;

  ContentItem(this.data);

  @override
  Widget build(BuildContext context) {
    return Container(
      height: 40,
      alignment: Alignment.center,
      child: Text(data),[图片上传中...(搜狗截图20211022222117.png-414c3c-1634912484713-0)]

    );
  }
}

List.build.png

带有分割线

使用ListView.separated可以简单的设置列表条目的分割线

class _TestHomePageState extends State<TestHomePage> {
  List<String> data = ['张三', '李四', '王五', 'Mike'];

  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(
          title: Text(widget.title),
        ),
        body: ListView.separated(
          itemBuilder: (BuildContext context, int index) {
            print('----$index---');
            return ContentItem(data[index % data.length]);
          },
          itemCount: 20,
          separatorBuilder: (BuildContext context, int index) {
            return Divider();
          },
        ));
  }
}

class ContentItem extends StatelessWidget {
  String data;

  ContentItem(this.data);

  @override
  Widget build(BuildContext context) {
    return Container(
      height: 40,
      alignment: Alignment.center,
      child: Text(data),
    );
  }
}

separated.png

列表的方向

可以很轻松的设置列表的方向
scrollDirection: Axis.horizontal

滚动到指定位置

class _TestHomePageState extends State<TestHomePage> {
  List<String> data = ['张三', '李四', '王五', 'Mike'];
  ScrollController controller = new ScrollController();
  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(
          title: Text(widget.title),
        ),
        body: Column(
          children: [
            InkWell(
              onTap: () {
                controller.jumpTo(120);
              },
              splashColor: Colors.blue,
              child: Container(
                height: 40,
                width: double.infinity,
                alignment: Alignment.center,
                child: Text("Click"),
              ),
            ),
            Expanded(
                child: ListView.separated(
              itemBuilder: (BuildContext context, int index) {
                print('----$index---');
                return ContentItem(data[index % data.length]);
              },
              itemCount: 50,
              separatorBuilder: (BuildContext context, int index) {
                return Divider();
              },
              controller: controller,
            ))
          ],
        ));
  }
}

子条目点击事件

ListView.separated(
              itemBuilder: (BuildContext context, int index) {
                print('----$index---');
                return GestureDetector(
                  onTap: (){
                    print('--tap--$index---');
                  },
                  child: ContentItem(data[index % data.length]),
                );
              },
              itemCount: 50,
              separatorBuilder: (BuildContext context, int index) {
                return Divider(height: 1);
              },
              controller: controller,
            )

欢迎关注Mike的简书

Android 知识整理