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

相关文章
|
2月前
|
设计模式 缓存 Dart
Flutter学习笔记&学习资料推荐,15分钟的字节跳动视频面试
Flutter学习笔记&学习资料推荐,15分钟的字节跳动视频面试
|
4天前
|
索引
flutter-其他学习
flutter-其他学习
|
4天前
flutter的状态管理学习
flutter的状态管理学习
|
4天前
|
开发者
Flutter 动画学习
Flutter 动画学习
|
4天前
|
Android开发 开发者
flutter 开发环境配置和生命周期学习
flutter 开发环境配置和生命周期学习
|
4天前
flutter- Row Column Expanded ListView
flutter- Row Column Expanded ListView
|
2月前
|
前端开发 UED 开发者
【Flutter前端技术开发专栏】Flutter中的列表与滚动视图优化
【4月更文挑战第30天】Flutter开发中,优化列表和滚动视图至关重要。本文介绍了几种优化方法:1) 使用`ListView.builder`和`GridView.builder`实现懒加载;2) 复用子组件以减少实例创建;3) 利用`CustomScrollView`和`Slivers`提升滚动性能;4) 通过`NotificationListener`监听滚动事件;5) 使用`KeepAlive`保持列表项状态。掌握这些技巧能提升应用性能和用户体验。
【Flutter前端技术开发专栏】Flutter中的列表与滚动视图优化
|
2月前
|
存储 缓存 监控
【Flutter前端技术开发专栏】Flutter中的列表滚动性能优化
【4月更文挑战第30天】本文探讨了Flutter中优化列表滚动性能的策略。建议使用`ListView.builder`以节省内存,避免一次性渲染所有列表项。为防止列表项重建,可使用`UniqueKey`或`ObjectKey`。缓存已渲染项、减少不必要的重绘和异步加载大数据集也是关键。此外,选择轻量级组件,如`StatelessWidget`,并利用Flutter DevTools监控性能以识别和解决瓶颈。持续测试和调整以提升用户体验。
【Flutter前端技术开发专栏】Flutter中的列表滚动性能优化
|
2月前
|
前端开发 数据处理
【Flutter 前端技术开发专栏】Flutter 中的滚动性能优化与无限列表实现
【4月更文挑战第30天】本文探讨了 Flutter 中的滚动性能优化和无限列表实现。关键点包括:1) 滚动性能直接影响用户满意度,优化可提升响应速度;2) 影响因素有布局复杂度、频繁重绘和数据处理;3) 优化措施包括懒加载、简化布局、减少不必要的重绘和高效处理数据;4) 无限列表通过监听滚动位置,动态加载新数据;5) 实现时注意加载策略、数据处理效率和内存管理。案例分析和总结强调了优化在实际开发中的重要性。
【Flutter 前端技术开发专栏】Flutter 中的滚动性能优化与无限列表实现
|
2月前
|
Java Android开发 消息中间件
flutter面试,字节大牛教你手撕Android学习
flutter面试,字节大牛教你手撕Android学习