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一样

相关文章
|
6天前
|
设计模式 移动开发 开发框架
如何学习 Flutter 框架?
学习 Flutter 需要耐心和持续的努力,通过系统的学习、实践、交流和不断跟进最新技术,你将逐渐掌握 Flutter 框架,并能够开发出高质量的移动应用。
|
18天前
|
存储 缓存 JavaScript
Flutter 学习之封装 WebView
【10月更文挑战第24天】通过以上的探讨,我们可以看出,在 Flutter 中封装 WebView 是非常有必要的,它可以提高代码的复用性、增强可维护性、提供统一接口。在实际应用中,我们需要根据具体的需求和场景,选择合适的封装方法和技术,以实现更好的效果。
|
1月前
|
Dart 开发者 Windows
flutter:dart的学习
本文介绍了Dart语言的下载方法及基本使用,包括在Windows系统上和VSCode中的安装步骤,并展示了如何运行Dart代码。此外,还详细说明了Dart的基础语法、构造函数、泛型以及库的使用方法。文中通过示例代码解释了闭包、运算符等概念,并介绍了Dart的新特性如非空断言操作符和延迟初始化变量。最后,提供了添加第三方库依赖的方法。
29 12
|
16天前
|
开发工具
Flutter&鸿蒙next中封装一个列表组件
Flutter&鸿蒙next中封装一个列表组件
31 0
|
3月前
|
UED
Flutter之ListView实现自动滑动到底部
Flutter之ListView实现自动滑动到底部
207 1
|
3月前
|
Dart 开发工具 Android开发
Flutter学习:从搭建环境到运行
Flutter学习:从搭建环境到运行
45 0
|
4月前
|
索引
flutter-其他学习
flutter-其他学习
|
4月前
flutter的状态管理学习
flutter的状态管理学习
|
4月前
|
开发者
Flutter 动画学习
Flutter 动画学习
|
4月前
|
Android开发 开发者
flutter 开发环境配置和生命周期学习
flutter 开发环境配置和生命周期学习