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

相关文章
|
29天前
|
UED
Flutter之ListView实现自动滑动到底部
Flutter之ListView实现自动滑动到底部
31 1
|
1月前
|
Dart 开发工具 Android开发
Flutter学习:从搭建环境到运行
Flutter学习:从搭建环境到运行
31 0
|
2月前
|
索引
flutter-其他学习
flutter-其他学习
|
2月前
flutter的状态管理学习
flutter的状态管理学习
|
2月前
|
开发者
Flutter 动画学习
Flutter 动画学习
|
2月前
|
Android开发 开发者
flutter 开发环境配置和生命周期学习
flutter 开发环境配置和生命周期学习
|
2月前
flutter- Row Column Expanded ListView
flutter- Row Column Expanded ListView
|
前端开发 容器
flutter GridView 九宫格
* GridView的构造函数方法,一次性构建所有的子条目,适用于少量数据 * GridView.builder方式来构建,懒加载模式,适用于大量数据的情况 * GridView.count方式来构建,适用于固定列的情况,适用于少量数据 GridView.extent 方式来构建,适用于条目有最大宽度的限制的情况,适用于少量数据的情况下 * GridView.custom 方式来构建,可配置子条目的排列规则也可配置子条目的渲染加载模式
flutter GridView 九宫格
|
3月前
|
开发框架 前端开发 测试技术
Flutter开发常见问题解答
Flutter开发常见问题解答
|
4月前
|
前端开发 C++ 容器
Flutter-完整开发实战详解(一、Dart-语言和-Flutter-基础)(1)
Flutter-完整开发实战详解(一、Dart-语言和-Flutter-基础)(1)
下一篇
DDNS