flutter NestedScrollView和ListView ListView到顶部触发NestedScrollView上拉 flutter column listview

转载

智能创新者 2024-05-30 22:26:39

一、Flutter 列表组件概述

在开发项目的时候，列表布局的使用频率是相当高的。在Flutter 中我们可以通过 ListView 来定义列表项，支持垂直和水平方向展示。列表的横向和纵向的滑动可以通过一个属性控制。

flutter列表组件有以下几种分类：

1、垂直列表
2、垂直图文列表
3、水平列表
4、动态列表
5、矩阵式列表

二、Flutter 列表参数

参数名称	参数类型	说明
`scrollDirection`	`Axis`	`Axis.horizontal` ：水平列表 `Axis.vertical` ：垂直列表
`padding`	`EdgeInsetsGeometry`	`内边距`
`resolve`	`bool`	`组件反向排序`
`children`	`List<Widget>`	`列表元素`

三、垂直列表

以下为一个垂直列表的Demo:

import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';

//列表组件讲解

void main() {
  int i = 0;
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: "Flutter Demo",
      home: Scaffold(
        appBar: AppBar(
          title: Text('This is a demo'),
          elevation: 15.0,
        ),
        //设置标题阴影
        body: MyHome(),
      ),
      theme: ThemeData(
          //设置主题颜色
          primarySwatch: Colors.yellow),
    );
  }
}

class MyHome extends StatelessWidget {
  int i = 0;
  int j = 0;

  @override
  Widget build(BuildContext context) {
    return ListView(
      padding: EdgeInsets.all(15),
      //组件数组
      children: <Widget>[                                                                            
        ListTile(
     //leading为主题图片
          leading: Icon(Icons.airplay,color: Colors.red,),
          title: Text("标题 ----------" + (++i).toString(),style: TextStyle(fontSize: 34)),
          subtitle: Text("副标题-----------------" + (++j).toString(),style: TextStyle(fontSize: 20)),
        ), ListTile(
          leading: Icon(Icons.add_box,color: Colors.red,),
          title: Text("标题 ----------" + (++i).toString(),style: TextStyle(fontSize: 34)),
          subtitle: Text("副标题-----------------" + (++j).toString(),style: TextStyle(fontSize: 20)),
        ), ListTile(
          leading: Icon(Icons.home,color: Colors.red,),
          title: Text("标题 ----------" + (++i).toString(),style: TextStyle(fontSize: 34)),
          subtitle: Text("副标题-----------------" + (++j).toString(),style: TextStyle(fontSize: 20)),
        ), ListTile(
          leading: Icon(Icons.directions_car,color: Colors.red,),
          title: Text("标题 ----------" + (++i).toString(),style: TextStyle(fontSize: 34)),
          subtitle: Text("副标题-----------------" + (++j).toString(),style: TextStyle(fontSize: 20)),
        ), ListTile(
          leading: Icon(Icons.phone,color: Colors.red,),
          title: Text("标题 ----------" + (++i).toString(),style: TextStyle(fontSize: 34)),
          subtitle: Text("副标题-----------------" + (++j).toString(),style: TextStyle(fontSize: 20)),
        ), ListTile(
          leading: Icon(Icons.email,color: Colors.red,),
          title: Text("标题 ----------" + (++i).toString(),style: TextStyle(fontSize: 34)),
          subtitle: Text("副标题-----------------" + (++j).toString(),style: TextStyle(fontSize: 20)),
        ), ListTile(
          leading: Icon(Icons.forward, color: Colors.red,),
          title: Text("标题 ----------" + (++i).toString(), style: TextStyle(fontSize: 34)),
          subtitle: Text("副标题-----------------" + (++j).toString(),style: TextStyle(fontSize: 20)),
        ),ListTile(
          leading: Icon(Icons.print, color: Colors.red,),
          title: Text("标题 ----------" + (++i).toString(), style: TextStyle(fontSize: 34)),
          subtitle: Text("副标题-----------------" + (++j).toString(),style: TextStyle(fontSize: 20)),
        ),ListTile(
          leading: Icon(Icons.add, color: Colors.red,),
          title: Text("标题 ----------" + (++i).toString(), style: TextStyle(fontSize: 34)),
          subtitle: Text("副标题-----------------" + (++j).toString(),style: TextStyle(fontSize: 20)),
        ),ListTile(
          leading: Icon(Icons.map, color: Colors.red,),
          title: Text("标题 ----------" + (++i).toString(), style: TextStyle(fontSize: 34)),
          subtitle: Text("副标题-----------------" + (++j).toString(),style: TextStyle(fontSize: 20)),
        ),
      ],
    );
  }
}

效果：

flutter NestedScrollView和ListView ListView到顶部触发NestedScrollView上拉 flutter column listview_Text

三、垂直图文列表

以下为一个垂直图文列表的Demo:

import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';

//垂直图文列表组件讲解

void main() {
  int i = 0;
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: "Flutter Demo",
      home: Scaffold(
        appBar: AppBar(
          title: Text('垂直列表图文展示'),
          elevation: 15.0,
        ),
        //设置标题阴影
        body: MyHome(),
      ),
      theme: ThemeData(
          //设置主题颜色
          primarySwatch: Colors.yellow),
    );
  }
}

class MyHome extends StatelessWidget {
  int i = 0;
  int j = 0;

  @override
  Widget build(BuildContext context) {
    return ListView(
      children: <Widget>[
        Container(
          child: Text(
            'Image1',
            style: TextStyle(fontSize: 20),
          ),
          margin: EdgeInsets.all(20),
        ),
        Image.network(
          'https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=1488907392,4056383417&fm=26&gp=0.jpg',
        ),
        Container(
          child: Text(
            'Image2',
            style: TextStyle(fontSize: 20),
          ),
          margin: EdgeInsets.all(20),
        ),
        Image.network(
          'https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=2219902027,2497484543&fm=26&gp=0.jpg',
        )
      ],
    );
  }
}

效果：

flutter NestedScrollView和ListView ListView到顶部触发NestedScrollView上拉 flutter column listview_Text_02

四、水平列表

如果需要水平的列表效果，则只需要修改 ListView组件中的scrollDirection参数，ListView默认是垂直的列表，给scrollDirection参数传Axis.horizontal即可。

Axis.horizontal ：水平列表

Axis.vertical ：垂直列表

以下为一个水平列表的Demo:

import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';

//水平列表组件讲解

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: "Flutter Demo",
      home: Scaffold(
        appBar: AppBar(
          title: Text('水平列表展示'),
          elevation: 15.0,
        ),
        body: MyHome(),
      ),
      theme: ThemeData(
          //设置主题颜色
          primarySwatch: Colors.yellow),
    );
  }
}

class MyHome extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return ListView(
    //这里设置水平效果
      scrollDirection: Axis.horizontal,
      children: <Widget>[
        Image.network(
          'https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=2219902027,2497484543&fm=26&gp=0.jpg',
        ),
        Image.network(
          'https://dss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=3801470056,3792883664&fm=26&gp=0.jpg',
        ),
        Image.network(
          'https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=1799226807,1142896872&fm=26&gp=0.jpg',
        ),
        Image.network(
          'https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=2362004499,1903765256&fm=26&gp=0.jpg',
        ),
      ],
    );
  }
}

效果：

四、动态列表

1.通过直接定义每一个列表组件内容返回列表

List<Widget> _getData() {
    return [
      ListTile(
        title: Text('列表项1'),
      ),
      ListTile(
        title: Text('列表项2'),
      ),
      ListTile(
        title: Text('列表项3'),
      ),
    ];
  }

2.使用循环语句创建内容返回列表

List<Widget> _getData() {
    List<Widget> list = List();
    for (var i = 0; i < 20; i++) {
      list.add(ListTile(title: Text('列表$i')));
    }
    return list;
  }

3.使用后台返回的动态内容返回列表

假数据（模拟后台动态返回的数据列表）：

List listData=[
    {
      "title" :"深圳",
      "subtitle":"南山",
      "image":'https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=1837532015,2536059094&fm=26&gp=0.jpg'
    },{
      "title" :"深圳",
      "subtitle":"罗湖",
      "image":'https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=222594181,3693555163&fm=26&gp=0.jpg'
    },{
      "title" :"深圳",
      "subtitle":"福田",
      "image":'https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=1019620494,1782150996&fm=26&gp=0.jpg'
    },{
      "title" :"深圳",
      "subtitle":"宝安",
      "image":'https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=1397034868,2057056005&fm=26&gp=0.jpg'
    },{
      "title" :"深圳",
      "subtitle":"龙岗",
      "image":'https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=2423078734,3185076253&fm=26&gp=0.jpg'
    },{
      "title" :"深圳",
      "subtitle":"龙华",
      "image":'https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=272656705,3144629240&fm=26&gp=0.jpg'
    },
  ];

调用返回要显示的图文列表（把以上拿到的数据制作成一个图文列表）：

List<Widget> _getData() {
    //map()返回的是一个（'12','22','33'）形式的值
    var tempList = listData.map((value){
      return ListTile(
        leading: Image.network(value['image'],width: 100,height: 100,),
        title: Text(value["title"],style: TextStyle(fontSize:30),),
        subtitle: Text(value["subtitle"],style: TextStyle(fontSize:20),),
      );
    });
   //所以这里使用tolist返回列表
    return  tempList.toList();
  }

效果：

flutter NestedScrollView和ListView ListView到顶部触发NestedScrollView上拉 flutter column listview_flutter_03

四、矩阵式列表

1）通过命名构造函数GridView.count 实现网格布局
2）通过命名构造函数GridView.builder 实现网格布局

参数名称	参数类型	说明
scrollDirection	Axis	滚动方向
padding	EdageInsetsGeometry	内边距
`resolve`	bool	组件反向排序
crossAxisSpacing	double	水平子Widget之间间距
mainAxisSpacing	double	垂直子Widget之间间距
crossAxisCount	int	一行的Widget数量
childAspectRatio	double	子Widget宽高比例
children		<Widget>[ ]
gridDelegate	`SliverGridDelegateWithFixedCrossAxisCount，` `SliverGridDelegateWithMaxCrossAxisExtent`	控制布局，主要用在GridView.builder里面