Flutter 自定义今日头条版本的组件,及底部按钮切换静态样式

news2024/11/13 19:04:09

这里写目录标题

  • 1. 左右滑动实现标题切换,点击标题也可实现切换;
  • 2. 自定义KeepAliveWrapper 缓存页面;
    • 2.2 使用
  • 3. 底部导航切换;
  • 4. 自定义中间大导航;
  • 5.AppBar自定义顶部按钮图标、颜色
  • 6. Tabbar TabBarView实现类似头条顶部导航
    • 6. 1.混入SingleTickerProviderStateMixin
    • 6.2.定义TabController
    • 6.3、配置TabBar和TabBarView 都需要配置 controller(自查别漏了)
  • 7.Scaffold 中可以使用Scaffold 如何重新自定义第二个Scaffold
    • 7.1 PreferredSize可以改变appBar的高度,再给TabBar 包一个 sizebox 即可!

自用 无商业用途!!!!

1. 左右滑动实现标题切换,点击标题也可实现切换;

注意:点击顶部按钮时候会触犯_tabController.index会触发两次,普通左右滑动触发一次,所以为了避免触发两次,需要加如下判断

if (_tabController.animation!.value == _tabController.index) {
  print('${_tabController.animation!.value} --- ${_tabController.index}');
}

2. 自定义KeepAliveWrapper 缓存页面;

2.1 定义keepAliveWrapper.dart 文件;

import 'package:flutter/material.dart';

class KeepAliveWrapper extends StatefulWidget {
  const KeepAliveWrapper(
      {Key? key,  this.child, this.keepAlive = true})
      : super(key: key);
  final Widget? child;
  final bool keepAlive;
  
  State<KeepAliveWrapper> createState() => _KeepAliveWrapperState();
}

class _KeepAliveWrapperState extends State<KeepAliveWrapper>
    with AutomaticKeepAliveClientMixin {
  
  Widget build(BuildContext context) {
    return widget.child!;
  }

  
  bool get wantKeepAlive => widget.keepAlive;
  
  void didUpdateWidget(covariant KeepAliveWrapper oldWidget) {
    if (oldWidget.keepAlive != widget.keepAlive) {
      // keepAlive 状态需要更新,实现在 AutomaticKeepAliveClientMixin 中
      updateKeepAlive();
      super.didUpdateWidget(oldWidget);
    }
  }
}

2.2 使用

// 引入你自己的路径 记得替换

import '../../util/keepAliveWrapper.dart'; // 引入你自己的路径  记得替换

// 要缓存数据的组件包起来

KeepAliveWrapper(
  child: Center(
    child: Text('标题$item内容。。。'),
  ),
)

3. 底部导航切换;

4. 自定义中间大导航;

5.AppBar自定义顶部按钮图标、颜色

在这里插入图片描述

6. Tabbar TabBarView实现类似头条顶部导航

在这里插入图片描述

6. 1.混入SingleTickerProviderStateMixin

class _HomePageState extends State<HomePage> with SingleTickerProviderStateMixin{}

6.2.定义TabController

late TabController _tabController;

  void initState() {
    super.initState();
    _tabController = TabController(length: _lists.length, vsync: this); // 初始化长度
    _tabController.addListener(() {
      if (_tabController.animation!.value == _tabController.index) {
        print('${_tabController.animation!.value} --- ${_tabController.index}');
      }
    });
  }

6.3、配置TabBar和TabBarView 都需要配置 controller(自查别漏了)

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

7.Scaffold 中可以使用Scaffold 如何重新自定义第二个Scaffold

7.1 PreferredSize可以改变appBar的高度,再给TabBar 包一个 sizebox 即可!

在这里插入图片描述

在这里插入图片描述
git地址

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/393120.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

iOS开发之UIStackView基本运用

UIStackView UIStackView是基于自动布局AutoLayout&#xff0c;创建可以动态适应设备方向、屏幕尺寸和可用空间的任何变化的用户界面。UIStackView管理其ArrangedSubview属性中所有视图的布局。这些视图根据它们在数组中的顺序沿堆栈视图的轴排列。由axis, distribution, align…

java医院云HIS系统:融合B/S版电子病历系统 能与公卫、PACS等各类外部系统融合

医院HIS系统源码 云HIS系统源码&#xff1a;SaaS运维平台完整文档 有源码&#xff0c;有演示 java基层医院云his系统 融合B/S版电子病历系统&#xff0c;支持电子病历4级 拥有自主知识产权。 看演示及源码可私信我哦&#xff01; 一、系统概述 一款满足二甲医院、基层医疗机构…

九、会话技术CookieSession

会话技术 1&#xff0c;会话跟踪技术的概述 对于会话跟踪这四个词&#xff0c;我们需要拆开来进行解释&#xff0c;首先要理解什么是会话&#xff0c;然后再去理解什么是会话跟踪: 会话:用户打开浏览器&#xff0c;访问web服务器的资源&#xff0c;会话建立&#xff0c;直到有…

3D目标检测(二)—— 直接处理点云的3D目标检测网络VoteNet、H3DNet

前言上次介绍了基于Point-Based方法处理点云的模块&#xff0c;3D目标检测&#xff08;一&#xff09;—— 基于Point-Based方法的PointNet点云处理系列,其中相关的模块则是构成本次要介绍的&#xff0c;直接在点云的基础上进行3D目标检测网络的基础。VoteNet对于直接在点云上预…

科目一《综合素质》

目录综合素质重点题型分布注意事项章节分解第一章 职业理念第一节 教育观1. 教育观&#xff08;基本内涵&#xff09;一字不差背过第二节 学生观2. 学生观 一字不差背过第三节 教师观3. 教师观 一字不差背过第二章 教育法律法规第一节 教师的权利与义务第二节 学生的权利及其保…

QT基础入门【Demo篇】QString的相关操作

&#x1f4a2;&#x1f4a2;目录总览&#x1f4a2;&#x1f4a2;&#xff1a;QT基础入门目录总览 QString支持的操作符号有&#xff1a; 用于字符串之间比较&#xff1a;"!" "<" "<" "" ">" 用于字符串之间传递&a…

第九章 多机系统

考柿时间是3.9 文章目录多机系统并行性发展及计算机系统的分类开发并行性的途径计算机系统的分类(Flynn分类)SISD与片内并行&#xff08;芯片内的并行机制&#xff09;SIMD分成两个子类&#xff1a;MIMD分为两类&#xff08;**主要区别就是它们是否有共享的内存**、单系统映像&…

MTK平台修改AP 5G模式下所支持的频宽

代码路径 vendor/mediatek/kernel_modules/connectivity/wlan/core/gen4m/common/wlan_lib.c 将 prWifiVar->ucAp5gBandwidth (uint8_t) wlanCfgGetUint32( -- prAdapter, "Ap5gBw", MAX_BW_80MHZ); prAdapter, "Ap5gBw&quo…

Windows下UXP插件开发环境搭建及程序试运行

从PS2021开始&#xff0c;Adobe官方引入了新的插件平台&#xff1a;UXP&#xff0c;它的最终目标任务是取代现有的CEP&#xff0c;所以赶紧来提前做一下准备吧&#xff0c;我对这方面也一直很感兴趣&#xff0c;但是这方面的中文资料太少了&#xff0c;然后在网上查了一些资料和…

【剧前爆米花--爪哇岛寻宝】包装类的装拆箱和泛型的擦除机制

作者&#xff1a;困了电视剧 专栏&#xff1a;《数据结构--Java》 文章分布&#xff1a;这是关于数据结构的基础之一泛型的文章&#xff0c;希望对你有所帮助。 目录 包装类 装箱 装箱源码小细节 拆箱 泛型 什么是泛型 泛型编译的擦除机制 不能实例化泛型类型数组 包装…

LicenseBox Crack,对服务器的要求最低

LicenseBox Crack,对服务器的要求最低 LicenseBox是用于管理基于PHP的软件、WordPress插件或主题、主题、插件和WordPress的更新和许可的完整软件。它易于安装&#xff0c;对服务器的要求最低&#xff0c;用户友好的界面&#xff0c;无限脚本的使用为您的创造力打开了大门。 Li…

基于STM32的水质浑浊度和PH值监测系统设计(仿真+程序+讲解)

基于STM32的水质浑浊度和PH值监测系统设计(仿真程序讲解&#xff09; 仿真图proteus 8.9 程序编译器&#xff1a;keil 5 编程语言&#xff1a;C语言 设计编号&#xff1a;C0077 这里写目录标题演示讲解视频1.主要功能2.仿真3. 程序4.资料清单&下载链接演示讲解视频 基于…

基于JSP的网上书店的设计与实现

技术&#xff1a;Java、JSP等摘要&#xff1a;近年来&#xff0c;随着互联网的迅速普及&#xff0c;网络已经走进了千家万户&#xff0c;作为信息交流的一种平台&#xff0c;它给我们的日常生活带来了很大的便利。今天&#xff0c;各种各样的网站已经深入到了我们的日常生活&am…

单例模式之饿汉式

目录 1 单例模式的程序结构 2 饿汉式单例模式的实现 3 饿汉式线程安全 4 防止反射破坏单例 5 总结 单例模式&#xff08;Singleton Pattern&#xff09;是 Java 中最简单的设计模式之一。所谓单例就是在系统中只有一个该类的实例&#xff0c;并且提供一个访问该实例的全局…

2023年房地产定价模型研究报告

第一章 房地产定价模型概述 受疫情和房地产发展模式影响&#xff0c;目前我国房地产行业遭受着多重冲击&#xff0c;消费者不断降低的购房意愿&#xff0c;频繁出现的烂尾楼问题&#xff0c;建筑材料和工人价格的不断上涨等。而房地产行业本身又是带动如电器&#xff0c;装修&…

《C++程序设计原理与实践》笔记 第14章 设计图形类

本章借助图形接口类介绍接口设计的思想和继承的概念。为此&#xff0c;本章将介绍与面向对象程序设计直接相关的语言特性&#xff1a;类派生、虚函数和访问控制。 14.1 设计原则 我们的图形接口类的设计原则是什么&#xff1f; 14.1.1 类型 我们的程序设计理念是在代码中直…

人工智能( AI )将如何颠覆项目管理?看看这六大关键领域

Gartner 研究预测&#xff0c;到 2030 年&#xff0c;80% 的项目管理任务将由 AI 运行&#xff0c;由大数据、机器学习和自然语言处理提供支持。 这些即将到来的技术发展视为前所未有的机遇。为这一颠覆时刻做好充分准备的企业和项目负责人将收获最大的回报。项目管理的每个方…

Linux操作系统学习(互斥)

文章目录线程安全互斥量互斥锁的原理线程安全补充可重入函数死锁线程安全 ​ 由于多个线程是共享同一个地址空间的&#xff0c;也就是很多资源都是共享的&#xff0c;那么线程通信就会很方便&#xff0c;但是方便的同时缺乏访问控制&#xff0c;可能会由于一个线程的操作问题&…

元数据管理、治理、系统、建设方案、范例等

【数据治理工具】–元数据系统 1.元数据系统 1.1 概述 如果想建设好元数据系统&#xff0c;需要理解元数据系统的相关概念&#xff0c;如数据、数据模型、元数据、元模型、ETL、数据血缘等等。 首先&#xff0c;要清楚数据的定义、数据模型的定义。数据一般是对客观事物描述…

全国程序员薪酬大曝光!看完我酸了····

2023年&#xff0c;随着互联网产业的蓬勃发展&#xff0c;程序员作为一个自带“高薪多金”标签的热门群体&#xff0c;被越来越多的人所关注。在过去充满未知的一年中&#xff0c;他们的职场现状发生了一定的改变。那么&#xff0c;程序员岗位的整体薪资水平、婚恋现状、职业方…