Flutter 列表学习(listview,gridview,ExpansionTile,ScrollController,RefreshIndicator)

简介: Flutter 列表学习(listview,gridview,ExpansionTile,ScrollController,RefreshIndicator)

任何页面可以分为3类,第一类 全列表,第二类非列表,第三类非列表和列表,所以列表玩溜了,就成功了一大步。下面我们就开始搞列表

列表分类
1. 纵向列表
2. 横向列表
3. 网格列表
4. 可点击展开列表
5. 下拉刷新
6. 加载更多
listview(纵向横向列表)
import 'package:flutter/material.dart';

class ListViewPage extends StatefulWidget {
  @override
  _ListViewPageState createState() => _ListViewPageState();
}

class _ListViewPageState extends State<ListViewPage> {
  var _scrollcontroller = ScrollController();
  List<String> _datas = [
    "A",
    "B",
    "C",
    "D",
    "E",
    "A",
    "B",
    "C",
    "D",
    "E",
    "A",
    "B",
    "C",
    "D",
    "E"
  ];

  @override
  void dispose() {
    // TODO: implement dispose
    _scrollcontroller.dispose();
    super.dispose();
  }

  @override
  void initState() {
    // TODO: implement initState
    _scrollcontroller.addListener(() {
      if (_scrollcontroller.position.pixels ==
          _scrollcontroller.position.maxScrollExtent) {
        _loadData();
      }
    });

    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    return Center(
      child: RefreshIndicator(
          child: ListView.builder(
            //scrollDirection: Axis.horizontal,
            controller: _scrollcontroller,
            itemBuilder: (context, index) {
              return _item(index);
            },
            itemCount: _datas.length,
          ),
          onRefresh: _handerRefres),
    );
  }

  Future<Null> _handerRefres() async {
    await Future.delayed(Duration(seconds: 2));
    setState(() {
      _datas = _datas.reversed.toList();
    });
  }

  Future<Null> _loadData() async {
    await Future.delayed(Duration(seconds: 2));
    setState(() {
      var list = List<String>.from(_datas);
      list.addAll(_datas);
      _datas = list;
    });
  }

  Widget _item(index) {
    return Container(
      height: 80,
//      width: 160,
//      margin: const EdgeInsets.only(right: 5),
      margin: const EdgeInsets.only(bottom: 5),
      alignment: Alignment.center,
      decoration: BoxDecoration(color: Colors.teal),
      child: Text(
        _datas[index],
        style: TextStyle(
            color: Colors.white, fontSize: 20, decoration: TextDecoration.none),
      ),
    );
  }
}

gridview (网格列表)
import 'package:flutter/material.dart';

class GridViewPage extends StatefulWidget {
  @override
  _GridViewPageState createState() => _GridViewPageState();
}

class _GridViewPageState extends State<GridViewPage> {
  List<String> _datas = [
    "A",
    "B",
    "C",
    "D",
    "E",
    "A",
    "B",
    "C",
    "D",
    "E",
    "A",
    "B",
    "C",
    "D",
    "E"
  ];

  @override
  Widget build(BuildContext context) {
    return Center(
      child: GridView.count(
        crossAxisCount: 2,
        children: getws(),
        //scrollDirection: Axis.horizontal,
      ),
    );
  }


  List<Widget> getws(){
    return _datas.map((f)=>_item(f)).toList();
  }

  Widget _item(index) {
    return Container(
      height: 80,
//      width: 160,
//      margin: const EdgeInsets.only(right: 5),
       margin: const EdgeInsets.only(bottom: 5),
      alignment: Alignment.center,
      decoration: BoxDecoration(color: Colors.teal),
      child: Text(
        index,
        style: TextStyle(
            color: Colors.white, fontSize: 20, decoration: TextDecoration.none),
      ),
    );
  }
}

ExpansionTile (可以点击展开列表)
import 'package:flutter/material.dart';

const DATA = {
  "A": ["AB", "AC", "AD"],
  "B": ["BB", "BC", "BD"],
  "C": ["CB", "CC", "CD"],
  "D": ["DB", "DC", "DD"],
};

class ExpansionTitlePage extends StatefulWidget {
  @override
  _ExpansionTitlePageState createState() => _ExpansionTitlePageState();
}

class _ExpansionTitlePageState extends State<ExpansionTitlePage> {
  @override
  Widget build(BuildContext context) {
    return Center(
      child: ListView(
        children: _getWs(),
      ),
    );
  }

  Widget _item(String title, List<String> datas) {
    return ExpansionTile(
      title: Text(title,
      style: TextStyle(color: Colors.black54,fontSize: 20),
      ),
      children: datas.map((data) => _item2(data)).toList(),
    );
  }

  List<Widget> _getWs() {
    List<Widget> ws = [];
    DATA.keys.forEach((key) {
      ws.add(_item(key, DATA[key]));
    });
    return ws;
  }

  Widget _item2(title) {
    //可伸缩
    return FractionallySizedBox(
      widthFactor: 1,
      child: Container(
        alignment: Alignment.center,
        height: 50,
        margin: const EdgeInsets.only(bottom: 5),
        decoration: BoxDecoration(color: Colors.lightBlueAccent),
        child: Text(title),
      ),
    );
  }
}

RefreshIndicator 下拉刷新控件

代码实例和listview一样

ScrollController 加载更多控件

代码实例和listview一样

相关文章
|
8天前
|
索引
【Flutter 开发必备】AzListView 组件全解析,打造丝滑索引列表!
在 Flutter 开发中,AzListView 是实现字母索引分类列表的理想选择。它支持 A-Z 快速跳转、悬浮分组标题、自定义 UI 和高效性能,适用于通讯录、城市选择等场景。本文将详细解析 AzListView 的核心参数和实战示例,助你轻松实现流畅的索引列表。
26 7
|
1月前
|
Dart 前端开发 Android开发
【09】flutter首页进行了完善-采用android studio 进行真机调试开发-增加了直播间列表和短视频人物列表-增加了用户中心-卓伊凡换人优雅草Alex-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草Alex
【09】flutter首页进行了完善-采用android studio 进行真机调试开发-增加了直播间列表和短视频人物列表-增加了用户中心-卓伊凡换人优雅草Alex-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草Alex
54 4
【09】flutter首页进行了完善-采用android studio 进行真机调试开发-增加了直播间列表和短视频人物列表-增加了用户中心-卓伊凡换人优雅草Alex-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草Alex
|
2月前
|
Dart 前端开发 架构师
【01】vs-code如何配置flutter环境-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草央千澈-供大大的学习提升
【01】vs-code如何配置flutter环境-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草央千澈-供大大的学习提升
212 26
|
4月前
|
存储 缓存 JavaScript
Flutter 学习之封装 WebView
【10月更文挑战第24天】通过以上的探讨,我们可以看出,在 Flutter 中封装 WebView 是非常有必要的,它可以提高代码的复用性、增强可维护性、提供统一接口。在实际应用中,我们需要根据具体的需求和场景,选择合适的封装方法和技术,以实现更好的效果。
|
4月前
|
前端开发 数据处理 开发者
Flutter应用开发中滚动性能优化与无限列表实现的重要性
本文深入探讨了Flutter应用开发中滚动性能优化与无限列表实现的重要性。首先分析了影响滚动性能的因素,如布局复杂度、重绘频率和数据处理等。接着介绍了优化方法,包括懒加载、简化布局、控制重绘和高效数据处理。最后详细讲解了无限列表的实现原理及步骤,并通过案例分析展示了具体应用,旨在为开发者提供实用的技术指导。
79 5
|
4月前
|
设计模式 移动开发 开发框架
如何学习 Flutter 框架?
学习 Flutter 需要耐心和持续的努力,通过系统的学习、实践、交流和不断跟进最新技术,你将逐渐掌握 Flutter 框架,并能够开发出高质量的移动应用。
|
5月前
|
Dart 开发者 Windows
flutter:dart的学习
本文介绍了Dart语言的下载方法及基本使用,包括在Windows系统上和VSCode中的安装步骤,并展示了如何运行Dart代码。此外,还详细说明了Dart的基础语法、构造函数、泛型以及库的使用方法。文中通过示例代码解释了闭包、运算符等概念,并介绍了Dart的新特性如非空断言操作符和延迟初始化变量。最后,提供了添加第三方库依赖的方法。
56 12
|
4月前
|
开发工具
Flutter&鸿蒙next中封装一个列表组件
Flutter&鸿蒙next中封装一个列表组件
76 0
|
7月前
|
UED
Flutter之ListView实现自动滑动到底部
Flutter之ListView实现自动滑动到底部
264 1
|
8月前
|
索引
flutter-其他学习
flutter-其他学习

热门文章

最新文章

  • 1
    【Flutter 开发必备】AzListView 组件全解析,打造丝滑索引列表!
    26
  • 2
    flutter3-wetrip跨平台自研仿携程app预约酒店系统模板
    33
  • 3
    通过外部链接启动 Flutter App(详细介绍及示例)
    32
  • 4
    【01】噩梦终结flutter配安卓android鸿蒙harmonyOS 以及next调试环境配鸿蒙和ios真机调试环境-flutter项目安卓环境配置-gradle-agp-ndkVersion模拟器运行真机测试环境-本地环境搭建-如何快速搭建android本地运行环境-优雅草卓伊凡-很多人在这步就被难倒了
    155
  • 5
    零基础构建即时通讯开源项目OpenIM移动端-Flutter篇
    101
  • 6
    flutter3-dart3-dymall原创仿抖音(直播+短视频+聊天)商城app系统模板
    59
  • 7
    【11】flutter进行了聊天页面的开发-增加了即时通讯聊天的整体页面和组件-切换-朋友-陌生人-vip开通详细页面-即时通讯sdk准备-直播sdk准备-即时通讯有无UI集成的区别介绍-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草Alex
    174
  • 8
    【09】flutter首页进行了完善-采用android studio 进行真机调试开发-增加了直播间列表和短视频人物列表-增加了用户中心-卓伊凡换人优雅草Alex-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草Alex
    54
  • 9
    当flutter react native 等混开框架-并且用vscode-idea等编译器无法打包apk,打包安卓不成功怎么办-直接用android studio如何打包安卓apk -重要-优雅草卓伊凡
    82
  • 10
    【08】flutter完成屏幕适配-重建Android,增加GetX路由,屏幕适配,基础导航栏-多版本SDK以及gradle造成的关于fvm的使用(flutter version manage)-卓伊凡换人优雅草Alex-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草Alex
    176