首页 > 其他分享 >一统天下 flutter - widget Sliver: NestedScrollView - 为可滚动组件提供 sliver 效果

一统天下 flutter - widget Sliver: NestedScrollView - 为可滚动组件提供 sliver 效果

时间:2023-04-23 16:56:23浏览次数:46  
标签:widget 滚动 NestedScrollView 组件 flutter sliver

源码 https://github.com/webabcd/flutter_demo
作者 webabcd

一统天下 flutter - widget Sliver: NestedScrollView - 为可滚动组件提供 sliver 效果

示例如下:

lib\widget\sliver\nested_scroll_view.dart

/*
 * NestedScrollView - 为可滚动组件提供 sliver 效果
 */

import 'package:flutter/material.dart';

import '../../helper.dart';

class NestedScrollViewDemo extends StatefulWidget {
  const NestedScrollViewDemo({Key? key}) : super(key: key);

  @override
  _NestedScrollViewDemoState createState() => _NestedScrollViewDemoState();
}

class _NestedScrollViewDemoState extends State<NestedScrollViewDemo> {

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      /// NestedScrollView - 为可滚动组件提供 sliver 效果
      body: NestedScrollView(
        /// 用于构造 slivers
        headerSliverBuilder: (BuildContext context, bool innerBoxIsScrolled) {
          return [
            SliverAppBar(
              title: const Text('title'),
              expandedHeight: 200,
              flexibleSpace: FlexibleSpaceBar(
                background: Image.asset('assets/son.jpg',fit: BoxFit.cover,),
              ),
              pinned: true,
            ),
          ];
        },

        /// 一个可滚动组件
        body: ListView.builder(
          padding: EdgeInsets.zero,
          itemCount: 20,
          itemBuilder: (BuildContext context,int index) {
            return Container(
              height: 100,
              color: Colors.primaries[index % Colors.primaries.length],
              alignment: Alignment.center,
              child: MyText('$index'),
            );
          },
        ),
      ),
    );
  }
}

源码 https://github.com/webabcd/flutter_demo
作者 webabcd

标签:widget,滚动,NestedScrollView,组件,flutter,sliver
From: https://www.cnblogs.com/webabcd/p/flutter_lib_widget_sliver_nested_scroll_view.html

相关文章

  • 一统天下 flutter - widget Sliver: SliverPersistentHeader - 自定义可展开/收缩的标
    源码https://github.com/webabcd/flutter_demo作者webabcd一统天下flutter-widgetSliver:SliverPersistentHeader-自定义可展开/收缩的标题栏示例如下:lib\widget\sliver\sliver_persistent_header.dart/**SliverPersistentHeader-自定义可展开/收缩的标题栏......
  • 一统天下 flutter - widget 选择类: showDatePicker()/showTimePicker/CalendarDatePi
    源码https://github.com/webabcd/flutter_demo作者webabcd一统天下flutter-widget选择类:showDatePicker()/showTimePicker/CalendarDatePicker-日期选择和时间选择示例如下:lib\widget\selection\time_picker.dart/**showDatePicker()/showTimePicker/Calenda......
  • Android之AppWidget 开发浅析
    什么是AppWidgetAppWidget即桌面小部件,也叫桌面控件,就是能直接显示在Android系统桌面上的小程序,先看图:图中我用黄色箭头指示的即为AppWidget,一些用户使用比较频繁的程序,可以做成AppWidget,这样能方便地使用。典型的程序有时钟、天气、音乐播放......
  • 一统天下 flutter - widget 基础: 生命周期
    一统天下flutterhttps://github.com/webabcd/flutter_demo作者webabcd一统天下flutter-widget基础:生命周期示例如下:lib\widget\basic\lifecycle.dart/**生命周期*/import'package:flutter/material.dart';import'../../helper.dart';classLifecy......
  • Visual Studio编译和使用wxWidgets
    一、下载到官网:https://www.wxwidgets.org/官网会引导跳到github:https://github.com/wxWidgets/wxWidgets/releases/tag/v3.2.2github有很多个下载链接,有代码(source)和预编译包(binary),后者又分开发版(dev)和发布版(release)预编译包的VC版本和VS版本对应如下:*vc14x兼容20......
  • pyqt5-QTreeWidget
    1、介绍树形组件2、类和初始化classQTreeWidget(QTreeView):"""QTreeWidget(parent:QWidget=None)"""def__init__(self,parent=None):pass3、属性4、方法(1)setColumnCount设置列数,参数为int类型。树形组件只能是设置为1(2)setHeaderLabels设......
  • pyqt5-QTableWidget
    1、介绍这是pyqt的表格组件。2、类和初始化classQTableWidget(QTableView):def__init__(self,*__args):pass示例:self.table=QTableWidget(self.w)3、属性4、方法(1)columnCount和rowCount返回int类型,即列数和行数,最低为0,即空白,此时没有表头(2)setColum......
  • pyqt5-QTabWidget
    QTabWidget详解–fengMisaka–博客园(cnblogs.com)1、介绍标签页组件。2、类和初始化classQTabWidget(QWidget):def__init__(self,parent=None):pass3、属性4、常用方法(1)addTabdefaddTab(self,QWidget,*__args):"""addTa......
  • pyqt5-QWidget
    1、介绍QWidget是几乎所有pyqt组件的直接或间接父类,其声明的属性和方法很具有代表性。其他组件极大可能是直接使用,所以一般不再阐述。除非少数可能做了个性化覆写。2、类和初始化classQWidget(__PyQt5_QtCore.QObject,__PyQt5_QtGui.QPaintDevice):def__init__(self,p......
  • QtableWidget插入数据卡顿优化方法
    最近要使用Qtablewidget保存4300多的数据,发现以下刷新4300条数据,界面会变得非常卡顿,于是想了优化一下;因为要对所有数据排序,想用一下Qtablewidget自动排序功能,而且数据量不多,不想采用动态加载的方式来实现;方法1复用内存,不重复清除创建以前每次都会清除,然后重新创建对象,写数据,发现......