Flutter中的滚动视图(ListView 和GridView)

最新推荐文章于 2024-04-16 10:08:45 发布
最新推荐文章于 2024-04-16 10:08:45 发布
阅读量1k 收藏 1
点赞数 1
分类专栏： Flutter 文章标签： flutter
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/chase20150628/article/details/107951552
版权

1- ListView的使用

在文档中我们可以看到ListView有 几种创建方式

在这里插入图片描述

1.1公用的方式

//导入风格样式库
import 'package:flutter/material.dart';

//main函数
main() =>runApp(MyApp());

//MyApp类继承StatelessWidget
class MyApp extends StatelessWidget {

  //重写方法
  @override
  Widget build(BuildContext context) {
   
    return MaterialApp(
      home: JCHome() ,
    );
  }
}

class JCHome extends StatelessWidget {

  @override
  Widget build(BuildContext context) {
    //创建一个控制器
    return Scaffold(
      appBar:AppBar(
        title: Text(
          "Flutter Demo",
          style: TextStyle(
            fontSize: 20,
          ),
        ),

      ) ,
      body: JCHomePage(),
    );
  }
}


class JCHomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
   //这里可以调用不同的创建方式
    return creatListDefault1();
  }
}
1.3ListView的默认创建方式

定义一个函数，listView默认创建方式

ListView creatListDefault1() {

  return  ListView(
      children: List.generate(100, (index){

        return ListTile(
          leading: Icon(Icons.people),
          trailing: Icon(Icons.delete),
          title: Text(
            "联系人${index + 1}",
          ),
          subtitle: Text(
              "电话:18677768954"
          ),
        );

      })
  );
}

默认创建方式2

ListView getListViewDemo1(){

  ListView(
    children: <Widget>[
      Row(
        children: <Widget>[
          Icon(Icons.face,color: Colors.red,),
          Text(
            "这是一个脸谱",
            style: TextStyle(
              fontSize: 20,
            ),
          ),
        ],
      ),

    ],
  );

}
1.4 builder创建ListView
//创建方式2
class ListViewDemo2 extends StatelessWidget{
  @override
  Widget build(BuildContext context) {
    // TODO: implement build

    return ListView.builder(
       //item个数
        itemCount:100 ,
        //item的高度
        itemExtent:60 ,
        itemBuilder: (BuildContext ctx, int index){
          return Text("Hellow Word -- $index",
            style: TextStyle(
                fontSize: 20,
                color: Colors.red

            ),
          );
        }
    );
  }
}
1.5 separated分割线的创建方式

class ListViewDemo3 extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return ListView.separated(

      itemCount: 100,
      //创建cell
      itemBuilder: (BuildContext ctx, int index){
        return Text("测试--$index",
          style: TextStyle(
            fontSize: 20,

          ),
        );
      },
      //分割线
      separatorBuilder: (BuildContext ctx,int index){

        return Divider(
          color: Colors.red,

        );
      },

    );
  }
}

2-GridView几何视图

import 'dart:math';

import 'package:flutter/material.dart';

main() =>runApp(MyApp());


class MyApp extends StatelessWidget {

  //重写方法
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return MaterialApp(
      home: JCHome() ,
    );
  }
}

class JCHome extends StatelessWidget {

  @override
  Widget build(BuildContext context) {
    //创建一个控制器
    return Scaffold(
      appBar:AppBar(
        title: Text(
          "Flutter Demo",
          style: TextStyle(
            fontSize: 20,
          ),
        ),

      ) ,
      body: JCHomePage(),
    );
  }
}


class JCHomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    //调用不同的创建方式
    return  creatGridViewThress();
  }
}
2.1 默认创建GridView的方式

SliverGridDelegateWithFixedCrossAxisCount 固定交叉轴的 个数


//默认创建GridView的方式
Padding getGridViewDefault () {

  return   Padding(
    padding: const EdgeInsets.all(8.0),
    child: GridView(
        gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
          crossAxisCount: 3,
          crossAxisSpacing: 8,
          mainAxisSpacing: 8,
          //宽度和高度的比例 是0.8
          childAspectRatio: .8,

        ),
        children: List.generate(100, (index){

          return Container(
            color: Color.fromARGB(255, Random().nextInt(256), Random().nextInt(256), Random().nextInt(256)),
          );

        })
    ),
  );
}
2.2 builder创建方式

SliverGridDelegateWithMaxCrossAxisExtent


GridView creatGridViewTwoMethod (){
  return GridView.builder(
      //代理方式
      gridDelegate: SliverGridDelegateWithMaxCrossAxisExtent(
        maxCrossAxisExtent: 200,
        crossAxisSpacing: 8,
        mainAxisSpacing: 8,
      ),
      itemBuilder: (BuildContext context,int index){
        return Container(
          color: Color.fromARGB(255, Random().nextInt(256), Random().nextInt(256), Random().nextInt(256)),
        );
      }
  );
}

SliverGridDelegateWithFixedCrossAxisCount

GridView creatGridViewThress() {
  return GridView.builder(
      //固定交叉轴上item的个数
      gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
  
          crossAxisCount: 3,
          crossAxisSpacing: 8,
          mainAxisSpacing: 8,
          //宽度和高度的比例 是0.8
          childAspectRatio: .8,
      ),
      itemBuilder: (BuildContext context,int index){
        return Container(
          color: Color.fromARGB(255, Random().nextInt(256), Random().nextInt(256), Random().nextInt(256)),
        );
      }
  );
}

3. CustomScrollView

上面的ListView和GridView都可以通过 CustomScrollView的上市创建

ListView为例子看一下里面实现的源码

ListView继承BoxScrollView，
BoxScrollView继承 ScrollView
ScrollView继承StatelessWidget

通过查看ScrollView的build方法
在这里插入图片描述

是没有实现的方法(抽象类方法)
@protected List<Widget> buildSlivers(BuildContext context);
他的子类会实现， BoxScrollView

在这里插入图片描述

在BoxScrollView中实现，中我们发现

buildChildLayout 方法 也是一个抽象类方法，需要其子类实现(ListView 和 GridView)

在这里插入图片描述

ListView的实现

在这里插入图片描述

GridView的实现

在这里插入图片描述

3.1 CustomScrollView 中的 Sliver

在这里插入图片描述

CustomScrollView有一个slivers属性，里面让我们放对应的一些Sliver：

  • SliverList：类似于我们之前使用过的ListView；
  • SliverFixedExtentList：类似于SliverList只是可以设置滚动的高度；
  • SliverGrid：类似于我们之前使用过的GridView；
  • SliverPadding：设置Sliver的内边距，因为可能要单独给Sliver设置内边距；
  • SliverAppBar：添加一个AppBar，通常用来作为-CustomScrollView的HeaderView；
  • SliverSafeArea：设置内容显示在安全区域
import 'dart:math';

import 'package:flutter/material.dart';

main() =>runApp(MyApp());


class MyApp extends StatelessWidget {

  //重写方法
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return MaterialApp(
      home: JCHome() ,
    );
  }
}

class JCHome extends StatelessWidget {

  @override
  Widget build(BuildContext context) {
    //创建一个控制器
    return Scaffold(
//      appBar:AppBar(
//        title: Text(
//          "Flutter Demo",
//          style: TextStyle(
//            fontSize: 20,
//          ),
//        ),
//
//      ) ,
      body: JCHomePage(),
    );
  }
}


class JCHomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    // TODO: implement build

    return  creatSliverList();

  }
}

在这里插入图片描述

CustomScrollView creatSliverList (){

  return CustomScrollView(
    slivers: <Widget>[
      SliverAppBar(
        //固定导航条
        pinned: true,
        title: Text(
            "自定义的导航条"
        ),

        // 头部View的高度
        expandedHeight: 300,
        flexibleSpace: FlexibleSpaceBar(
            background: Image(
              image: AssetImage("resource/images/11.jpg"),
              fit: BoxFit.fill,
            ),
            collapseMode: CollapseMode.pin,
            stretchModes:[StretchMode.blurBackground]
        ),

      ),
      //集合视图sliver的Sliver
      SliverGrid(
        delegate: SliverChildBuilderDelegate(
              (BuildContext ctx, int index){

            return  Container(color: Color.fromARGB(255, Random().nextInt(
                256), Random().nextInt(256), Random().nextInt(256)));
          },
          childCount: 60,
        ),
        gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
            crossAxisCount: 3,
            crossAxisSpacing: 8,
            mainAxisSpacing: 8
        ),
      ),
      //listView
      SliverList(
        delegate: SliverChildBuilderDelegate(
              (BuildContext ctx, int  index){

            return ListTile(
              leading: Icon(Icons.people),
              title: Text("联系人 ${index}"),
            );
          },
          childCount: 50,
        ),
      ),
    ],
  );
}

在这里插入图片描述

CustomScrollView creatGridViewWithSliver(){

  return CustomScrollView(
    slivers: <Widget>[
      //安全区域
      SliverSafeArea(
        //安全padding
        sliver: SliverPadding(
          padding: EdgeInsets.all(8),
          sliver: SliverGrid(
            delegate:SliverChildBuilderDelegate(
                  (BuildContext context, int index){
                return Container(color: Color.fromARGB(255, Random().nextInt(
                    256), Random().nextInt(256), Random().nextInt(256)));
              },
              childCount: 100,
            ) ,
            gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
                crossAxisCount: 3,
                crossAxisSpacing: 8,
                mainAxisSpacing: 8
            ),
          ),
        ),
      )

    ],
  );
}
chase_cc
关注
  • 1
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Flutter 中滚动视图的物理原理：概述指南
iCloudEnd的博客
08-29 186
Flutter 是一个深受喜爱的框架，用于创建精美的跨平台应用程序，它提供了一系列小部件，使 UI 创建既有趣又富有表现力。一个这样的小部件就是ScrollView，如果您使用过它，您会注意到它具有可以决定其行为的各种物理属性。本文将深入研究 Flutter 中可用的不同类型的滚动物理原理。
flutter中ListView、ExpansionTile和GridView的学习
Mark_CHYL的博客
04-15 1305
一览众山小ListView的世界GridView的世界 ListView的世界 GridView的世界
Flutter 滚动布局：sliver模型
Mamong's blog
01-22 1936
Flutter中可滚动布局基本都来自Sliver模型，本文探讨sliver模型原理。
Flutter常用的滚动组建及其优化
weixin_43169271的博客
04-11 1104
Flutter 常用的滚动组件包括：ListView：在一个可滚动的列表中显示一系列的子控件。GridView：在一个网格布局中显示一系列的子控件。SingleChildScrollView：在一个可滚动的视图中显示单个子控件。CustomScrollView：自定义滚动模型的可滚动视图，可以同时包含多种滚动模型，如 ListView、GridView 和 SliverAppBar 等。
Flutter第十弹 ScrollView滚动组件
最新发布
joedan0104的专栏
04-16 1589
目标：1）滚动组件的特性？2）有哪些常用的滚动组件？
Flutter学习(滚动视图)
抽筋的小乌龟
04-14 1288
import 'package:flutter/material.dart'; class SecondPage extends StatelessWidget { @override Widget build(BuildContext context) { // TODO: implement build return CustomScrollView ( ...
Flutter-ListView-and-GridView
05-10
为了实现更丰富的交互，我们还可以在ListView和GridView中添加 onTap 事件监听器，以便用户点击列表项时触发相应的操作。此外，可以通过SliverPersistentHeader等高级组件来实现滚动头部固定效果，增强列表的可用性...
ListView和GridView的上拉加载下拉刷新
09-11
在Android开发中，ListView和GridView是两种常用的列表控件，它们用于展示大量数据，具有良好的滚动性能和可定制性。本篇文章将详细讲解如何实现ListView和GridView的上拉加载（Load More）和下拉刷新（Pull to ...
Listview 中包含GridView
09-25
这个内部Adapter负责填充GridView中的数据。 3. **数据绑定**：为ListView和内部的GridView分别设置Adapter，确保它们都能正确地从数据源获取数据。 4. **处理事件**：添加必要的监听器，如ListView的点击事件和...
listview gridview 上拉加载 下拉刷新 包含6个demo
11-11
2. "gridview-with-footerview-master"：这个名字暗示了在GridView中添加了一个Footer视图来实现加载更多的功能。Footer视图通常会显示一个加载指示器或提示信息，告知用户数据正在加载。 3. "PullToRefreshView"：...
Listview 添加 高度不相等的 gridview
03-09
在Android开发中，ListView和GridView是两种常用的列表控件，用于展示多行多列的数据。在某些场景下，用户可能需要展示高度不相等的item，以满足个性化或复杂布局的需求。在这种情况下，我们就需要对默认的GridView...
Flutter 滑动列表组件 ListView&&GridView
热门推荐
卓原的进化之旅
09-05 1万+
前言： 今天就来介绍下Flutter中的列表组件ListView和网格组件GirdView，嗯，果然是Google家的亲儿子，连名字都和Android里的一模一样。 好的吧，我们还是来看下这两个Widget的用法吧 ListView ListView就是我们常见的列表组件，在平时的应用开发中十分的常见，无论你做的是什么类型的应用都会多多少少会用到ListView，所以要好好看下这篇文章...
Flutter组件之滚动组件GridView
m0_46369686的博客
03-18 2178
GridView GridView可以构建一个二维网格列表，其默认构造函数定义如下： GridView({ Axis scrollDirection = Axis.vertical, bool reverse = false, ScrollController controller, bool primary, ScrollPhysics physics, bool shr...
Flutter(五)之Flutter滚动Widget
qq_27909209的博客
07-12 968
flutter
Flutter：Slivers大家族，让滑动视图的组合变得很简单！
chuyouyinghe的专栏
09-07 1150
文中所有示例代码请点击：gitee.com/yumi0629/Fl… 今天呢，我小拉面主要想给大家讲一讲Flutter中的Slivers大家族的使用场景和方法。开发过列表布局的同学们应该对Slivers系列的控件不陌生，或多或少都用过这个库中的控件，来解决复杂的滑动嵌套布局。 比如之前讲Hero的时候提到的下面这个界面，使用普通的GridView的话是没法实现的，我们选择使用CustomScrollView，然后在slivers属性中添加子控件，在这个例子里，我们可以用SliverTo...
flutter listview 滚动到底部_Flutter 入门指北之弹窗和提示（干货）
weixin_39906192的博客
11-28 424
码个蛋(codeegg)第 607 次推文Flutter系列文章:《Flutter 入门指北(Part 1)之 Dart》《Flutter 入门指北(Part 2)之基础部件》《Flutter 入门指北(Part 3)之 Appbar，Scaffold 填坑》《Flutter 入门指北(Part 4)之容器部件》《Flutter 入门指北(Part 5)之输入处理及实战》《Flutter 入门指北...
Flutter学习五：ListView&ScrollView练习
sinat_29256651的博客
08-01 4719
在Flutter中的ListView可以替代android中的ScrollView和Listview 代码注释如下： import 'package:flutter/material.dart'; void main() { runApp(MyApp()); } class MyApp extends StatelessWidget { @override Widget b...
Flutter使用可滚动组件（SingleChildScrollView,ListView,GridView）时的典型错误
m0_37828249的博客
01-31 3189
话不多说，直接丢报错信息，看看自己是否遇到： The following assertion was thrown during performLayout(): RenderFlex children have non-zero flex but incoming height constraints are unbounded. When a column is in a parent th...
flutter listview滚动
07-28
在 Flutter 中使用 ListView 进行滚动非常简单。你可以按照以下步骤进行操作： 1. 导入 Flutter 的 material 包：`import 'package:flutter/material.dart';` 2. 创建一个 ListView 组件，并将其放在一个可滚动的容器中。例如，你可以使用 SingleChildScrollView 组件来包裹 ListView，以确保在超出屏幕范围时可以滚动。 3. 配置 ListView 的属性，如 itemBuilder、itemCount 等。itemBuilder 是一个构建列表项的回调函数，itemCount 是列表项的数量。 4. 在 itemBuilder 回调函数中，你可以根据索引构建每个列表项的内容。 下面是一个简单的示例代码： ```dart import 'package:flutter/material.dart'; void main() { runApp(MyApp()); } class MyApp extends StatelessWidget { @override Widget build(BuildContext context) { return MaterialApp( home: Scaffold( appBar: AppBar( title: Text('ListView Scroll'), ), body: SingleChildScrollView( child: ListView.builder( shrinkWrap: true, itemCount: 50, itemBuilder: (BuildContext context, int index) { return ListTile( title: Text('Item $index'), ); }, ), ), ), ); } } ``` 在这个示例中，我们创建了一个包含50个列表项的 ListView，并使用 ListTile 构建每个列表项。通过将 ListView 包裹在 SingleChildScrollView 中，我们确保可以在屏幕上滚动。 你可以根据自己的需要调整代码和属性来满足特定的要求。希望这能帮助到你！

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值