Flutter 全局控制底部导航栏和自定义导航栏的方法

1. 介绍

导航栏在移动应用中扮演着至关重要的角色，它是用户与应用之间进行导航和交互的核心组件之一。无论是简单的页面切换，还是复杂的应用导航，导航栏都能够帮助用户快速找到所需内容，提升用户体验和应用的易用性。

在移动应用开发中，通常有两种常见的导航栏类型：底部导航栏（BottomNavigationBar）和自定义导航栏（CustomNavigationRail）。底部导航栏通常位于屏幕底部，以图标和标签的形式展示应用的不同功能或页面，用户可以通过点击不同的图标来切换页面。而自定义导航栏则是一种更加灵活的导航栏形式，可以根据应用的需求自定义布局、样式和交互方式，适用于一些特定场景或者需要更多定制化的应用。

然而，在某些情况下，我们可能需要在应用中灵活切换底部导航栏和自定义导航栏，以满足不同用户群体或特定场景下的需求。例如，在平板电脑或大屏幕设备上，使用自定义导航栏能够更好地利用屏幕空间，提供更丰富的导航和功能；而在手机端，底部导航栏可能更符合用户的使用习惯和操作方式。因此，全局控制底部导航栏和自定义导航栏的需求就变得十分重要。通过在应用中实现全局控制，我们可以根据不同的设备或用户需求动态切换导航栏类型，从而提升应用的灵活性和适用性。接下来，我们将探讨如何实现这一目标。

在这里插入图片描述

2. 底部导航栏与自定义导航栏简介

在移动应用开发中，底部导航栏（BottomNavigationBar）和自定义导航栏（CustomNavigationRail）是两种常见的导航栏形式，它们各具特点并在不同的应用场景下发挥着重要作用。

底部导航栏：

底部导航栏通常位于屏幕底部，以图标和标签的形式展示应用的不同功能或页面。它的特点包括：

  • 简洁直观：底部导航栏的设计简洁直观，用户可以通过点击不同的图标来快速切换页面，易于上手和操作。
  • 易于使用：底部导航栏符合用户的使用习惯和操作方式，使用户能够轻松找到所需功能，提升了应用的易用性。
  • 适用性广泛：底部导航栏适用于各种类型的应用，特别是那些功能较少或页面切换频繁的应用。

自定义导航栏：

自定义导航栏是一种更加灵活的导航栏形式，开发者可以根据应用的需求自定义布局、样式和交互方式。它的特点包括：

  • 灵活定制：自定义导航栏可以根据应用的特定需求进行灵活定制，包括布局、样式、交互方式等，满足不同应用场景的需求。
  • 丰富功能：自定义导航栏可以集成更丰富的功能和交互，如侧边栏、抽屉式导航、手势操作等，提供更多的导航和功能选择。
  • 适用特定场景：自定义导航栏通常适用于一些特定场景或需要更多定制化的应用，如平板电脑、桌面应用等，能够更好地利用屏幕空间和提供更丰富的导航体验。

优缺点分析：

底部导航栏和自定义导航栏各有优缺点，适用于不同的应用场景：

  • 底部导航栏适用于功能简单、页面切换频繁的应用，它简洁直观、易于使用，适合手机端的应用。
  • 自定义导航栏适用于需要定制化导航和丰富功能的应用，如平板电脑、桌面应用等，它灵活定制、功能丰富，能够提供更好的用户体验。

根据应用的实际需求和用户群体，开发者可以选择合适的导航栏形式，或者在不同设备和场景下动态切换导航栏类型，以提升应用的用户体验和适用性。接下来，我们将探讨如何实现全局控制底部导航栏和自定义导航栏的方法。

3. 枚举类型的使用

在Flutter中，枚举类型（Enum）是一种有限的、离散的数据类型，用于表示一组相关的常量值。枚举类型在表示一组可能的选项时非常有用，可以提高代码的可读性和可维护性。

介绍枚举类型及其在Flutter中的应用：

枚举类型是一种由一组命名的常量值组成的数据类型。在Flutter中，枚举类型通常用于表示一组相关的选项或状态，例如不同的导航栏类型、主题模式、状态等。通过使用枚举类型，我们可以更清晰地表达代码的意图，避免使用散乱的数字或字符串来表示选项，提高了代码的可读性和可维护性。

在Flutter中，枚举类型的声明方式如下所示：

enum NavigationType {bottomNavigationBar,customNavigationRail,
}

在上面的示例中，我们定义了一个名为NavigationType的枚举类型，它包含了两个常量值：bottomNavigationBar和customNavigationRail。这些常量值可以被用作代码中的标识符，并且它们的类型都是NavigationType。

定义一个枚举类型来表示导航栏的选择：

在全局控制底部导航栏和自定义导航栏的情景下，我们可以使用枚举类型来表示当前选择使用哪种导航栏。例如，在Flutter应用中，我们可以定义一个枚举类型来表示导航栏的选择，如下所示：

enum NavigationType {bottomNavigationBar,customNavigationRail,
}

然后，我们可以在应用中使用这个枚举类型来控制底部导航栏和自定义导航栏的显示和切换。通过这种方式，我们可以清晰地表达当前使用的导航栏类型，并且可以在代码中方便地引用这些选项。接下来，我们将探讨如何利用枚举类型实现全局控制导航栏的方法。

4. 全局控制方法

在移动应用开发中，有时我们需要根据不同的场景或用户需求来动态切换导航栏类型，以提供更好的用户体验。全局控制导航栏的目的是让开发者能够在应用的整个生命周期内灵活地选择和切换导航栏类型，从而满足不同设备、屏幕尺寸或用户需求下的导航需求。

讨论全局控制导航栏的需求和方法：

全局控制导航栏的需求通常包括：

  • 根据设备类型切换导航栏：例如，在手机端使用底部导航栏，在平板电脑或桌面端使用自定义导航栏。
  • 根据用户偏好切换导航栏：例如，提供一个设置选项，让用户自由选择喜欢的导航栏类型。

为了实现全局控制导航栏，我们可以借助枚举类型来表示不同的导航栏类型，并在应用的各个部分使用这个枚举类型来决定当前显示的导航栏。通过这种方式，我们可以轻松地切换导航栏类型，而不需要修改大量的代码。

介绍如何使用枚举类型来控制显示不同的导航栏：

首先，我们需要定义一个枚举类型来表示导航栏的选择，如下所示：

enum NavigationType {bottomNavigationBar,customNavigationRail,
}

然后，在应用的各个部分，我们可以根据这个枚举类型来决定当前显示的导航栏。例如，在build方法中根据枚举类型选择显示底部导航栏还是自定义导航栏：

Widget build(BuildContext context) {// 根据枚举类型选择显示不同的导航栏Widget navigationBar;switch (navigationType) {case NavigationType.bottomNavigationBar:navigationBar = BottomNavigationBar(...);break;case NavigationType.customNavigationRail:navigationBar = CustomNavigationRail(...);break;}return Scaffold(...bottomNavigationBar: navigationBar,...);
}

通过这种方式，我们可以在应用的任何地方轻松地切换导航栏类型，并且保持代码的简洁和可维护性。这样的全局控制方法使得应用的导航栏更加灵活，能够更好地适应不同的用户需求和设备环境。

5. 应用案例

在这个应用案例中，我们将展示如何在一个 Flutter 应用中实现全局控制导航栏，根据用户的偏好动态切换底部导航栏和自定义导航栏。假设我们的应用是一个新闻阅读应用，用户可以选择使用底部导航栏或者自定义导航栏来浏览新闻内容。

场景描述：

  • 当用户首次打开应用时，默认使用底部导航栏来显示新闻分类。
  • 应用提供一个设置页面，用户可以在设置页面中选择使用底部导航栏或者自定义导航栏来浏览新闻。

实现步骤：

  1. 定义枚举类型 NavigationType 来表示导航栏的选择。
  2. 在应用的根部件中，使用 NavigationType 来决定当前显示的导航栏类型。
  3. 在设置页面中，提供一个开关按钮或者下拉菜单，让用户选择喜欢的导航栏类型。
  4. 根据用户的选择，更新应用中的导航栏类型，并重新构建应用以应用新的设置。

示例代码：

import 'package:flutter/material.dart';// 定义枚举类型
enum NavigationType {bottomNavigationBar,customNavigationRail,
}void main() {runApp(MyApp());
}class MyApp extends StatefulWidget {@override_MyAppState createState() => _MyAppState();
}class _MyAppState extends State<MyApp> {// 默认使用底部导航栏NavigationType _navigationType = NavigationType.bottomNavigationBar;@overrideWidget build(BuildContext context) {return MaterialApp(title: 'Navigation Control Demo',theme: ThemeData(primarySwatch: Colors.blue,),home: Scaffold(appBar: AppBar(title: Text('News App'),),body: Center(child: Text('News Content'),),bottomNavigationBar: _buildNavigationBar(),),);}// 根据枚举类型选择显示不同的导航栏Widget _buildNavigationBar() {switch (_navigationType) {case NavigationType.bottomNavigationBar:return BottomNavigationBar(items: const <BottomNavigationBarItem>[BottomNavigationBarItem(icon: Icon(Icons.home),label: 'Home',),BottomNavigationBarItem(icon: Icon(Icons.category),label: 'Categories',),BottomNavigationBarItem(icon: Icon(Icons.bookmark),label: 'Bookmarks',),],currentIndex: 0,selectedItemColor: Colors.blue,onTap: (index) {},);case NavigationType.customNavigationRail:return CustomNavigationRail(selectedIndex: 0,onDestinationSelected: (index) {},);}}
}// 自定义导航栏组件
class CustomNavigationRail extends StatelessWidget {final int selectedIndex;final Function(int) onDestinationSelected;CustomNavigationRail({required this.selectedIndex,required this.onDestinationSelected,});@overrideWidget build(BuildContext context) {// 自定义导航栏的实现return Container(width: 80,color: Colors.grey[200],child: Column(mainAxisAlignment: MainAxisAlignment.center,children: <Widget>[IconButton(icon: Icon(Icons.home),onPressed: () {},),IconButton(icon: Icon(Icons.category),onPressed: () {},),IconButton(icon: Icon(Icons.bookmark),onPressed: () {},),],),);}
}

在这个示例中，我们通过定义枚举类型 NavigationType 来表示底部导航栏和自定义导航栏两种选择。根据用户的选择，我们在应用的根部件中选择显示不同类型的导航栏，并且在设置页面中让用户选择喜欢的导航栏类型。通过这样的全局控制方法，我们可以实现根据用户偏好动态切换导航栏类型的功能，提供更好的用户体验。

6. 代码实现

在这一部分，我们将展示如何在 Flutter 中实现全局控制导航栏，并给出详细的代码示例和解释。

示例代码：

import 'package:flutter/material.dart';// 定义枚举类型
enum NavigationType {bottomNavigationBar,customNavigationRail,
}void main() {runApp(MyApp());
}class MyApp extends StatefulWidget {@override_MyAppState createState() => _MyAppState();
}class _MyAppState extends State<MyApp> {// 默认使用底部导航栏NavigationType _navigationType = NavigationType.bottomNavigationBar;@overrideWidget build(BuildContext context) {return MaterialApp(title: 'Navigation Control Demo',theme: ThemeData(primarySwatch: Colors.blue,),home: Scaffold(appBar: AppBar(title: Text('Navigation Control Demo'),),body: Center(child: Text('Current Navigation Type: $_navigationType',style: TextStyle(fontSize: 18),),),bottomNavigationBar: _buildNavigationBar(),floatingActionButton: FloatingActionButton(onPressed: () {// 切换导航栏类型setState(() {_navigationType = _navigationType == NavigationType.bottomNavigationBar? NavigationType.customNavigationRail: NavigationType.bottomNavigationBar;});},child: Icon(Icons.swap_horizontal_circle),),),);}// 根据枚举类型选择显示不同的导航栏Widget _buildNavigationBar() {switch (_navigationType) {case NavigationType.bottomNavigationBar:return BottomNavigationBar(items: const <BottomNavigationBarItem>[BottomNavigationBarItem(icon: Icon(Icons.home),label: 'Home',),BottomNavigationBarItem(icon: Icon(Icons.category),label: 'Categories',),BottomNavigationBarItem(icon: Icon(Icons.bookmark),label: 'Bookmarks',),],currentIndex: 0,selectedItemColor: Colors.blue,onTap: (index) {},);case NavigationType.customNavigationRail:return CustomNavigationRail(selectedIndex: 0,onDestinationSelected: (index) {},);}}
}// 自定义导航栏组件
class CustomNavigationRail extends StatelessWidget {final int selectedIndex;final Function(int) onDestinationSelected;CustomNavigationRail({required this.selectedIndex,required this.onDestinationSelected,});@overrideWidget build(BuildContext context) {// 自定义导航栏的实现return Container(width: 80,color: Colors.grey[200],child: Column(mainAxisAlignment: MainAxisAlignment.center,children: <Widget>[IconButton(icon: Icon(Icons.home),onPressed: () {},),IconButton(icon: Icon(Icons.category),onPressed: () {},),IconButton(icon: Icon(Icons.bookmark),onPressed: () {},),],),);}
}

代码解释：

  1. 首先，我们定义了一个枚举类型 NavigationType 来表示底部导航栏和自定义导航栏两种选择。

  2. 在 MyApp 类的状态中，我们维护了一个 _navigationType 变量来表示当前选择的导航栏类型，默认为底部导航栏。

  3. 在 build 方法中，我们根据 _navigationType 的值选择显示不同类型的导航栏，并且在底部导航栏上添加了一个浮动动作按钮，点击按钮可以切换导航栏类型。

  4. 底部导航栏和自定义导航栏分别在 _buildNavigationBar 方法和 CustomNavigationRail 类中实现，并且根据 _navigationType 的值进行切换。

通过这样的代码实现，我们可以在 Flutter 应用中实现全局控制导航栏的功能，根据用户的偏好动态切换导航栏类型，提供更好的用户体验。

7. 总结

在本文中，我们讨论了在 Flutter 应用中实现全局控制导航栏的方法。通过使用枚举类型和条件判断，我们可以轻松地根据用户的偏好动态切换底部导航栏和自定义导航栏，从而提供更好的用户体验。以下是本文的主要总结：

  1. 全局控制导航栏的需求： 在某些场景下，用户可能希望能够根据自己的偏好选择使用底部导航栏还是自定义导航栏。因此，实现全局控制导航栏可以提高应用的灵活性和适用性。

  2. 方法概述： 我们使用枚举类型来表示不同的导航栏类型，并在应用的根部件中根据用户的选择动态切换导航栏。通过在 build 方法中根据枚举类型选择不同的导航栏实现，我们可以轻松地控制导航栏的显示。

  3. 代码实现： 我们展示了一个完整的代码示例，演示了如何在 Flutter 应用中实现全局控制导航栏的功能。通过定义枚举类型、状态管理和条件判断，我们可以根据用户的选择显示不同类型的导航栏，并且提供一个浮动按钮来切换导航栏类型。

综上所述，实现全局控制导航栏是一个简单而有效的方法，可以根据用户的偏好提供个性化的导航体验，增强应用的用户友好性和适用性。通过合理地设计和实现导航栏控制逻辑，我们可以为用户带来更加愉快和便捷的应用体验。

作者信息

作者 ： 繁依Fanyi
CSDN： https://techfanyi.blog.csdn.net
掘金：https://juejin.cn/user/4154386571867191

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

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

Mamba: Linear-Time Sequence Modeling with Selective State Spaces(论文笔记)

Mamba: Linear-Time Sequence Modeling with Selective State Spaces(论文笔记)

What can I say? 2024年我还能说什么&#xff1f; Mamba out! 曼巴出来了&#xff01; 原文链接&#xff1a; [2312.00752] Mamba: Linear-Time Sequence Modeling with Selective State Spaces (arxiv.org) 原文笔记&#xff1a; What&#xff1a; Mamba: Linear-Time …
阅读更多...
进程等待+替换

进程等待+替换

✨MyShell实现✨ c并发编程&#xff08;书籍&#xff09; ✨进程等待  ✨wait/waitpid   ✨代码示例  ✨coredump   ✨什么是coredump   ✨开启coredump功能   ✨示例代码   ✨退出码 ✨进程替换  ✨原理  ✨进程替换接口一览  ✨实现一个shell  ✨myshell反思…
阅读更多...
单链表就地逆置

单链表就地逆置

算法思想&#xff1a;构建一个带头结点的单链表L&#xff0c;然后访问链表中的每一个数据结点&#xff0c;将访问到的数据结点依此插入到L的头节点之后。 #define _CRT_SECURE_NO_WARNINGS #include<stdio.h> #include<stdlib.h> typedef int ElemType; typedef s…
阅读更多...
【学习】软件科技成果鉴定测试有何作用

【学习】软件科技成果鉴定测试有何作用

软件科技成果鉴定测试是针对软件进行项目申报、科技成果鉴定等相关目的进行的测试。软件测试报告可作为项目申报、科技成果鉴定等工作的依据之一。软件类科技成果鉴定测试从软件文档、功能性、使用技术等方面对软件系统进行符合性测试。其测试结果证明软件的质量是否符合技术合…
阅读更多...
智能指针（C++11）

智能指针（C++11）

智能指针的使用 问题 我们在平时写程序的时候&#xff0c;有些情况下不可避免地会遇见内存泄露的情况。内存泄露是指因为疏忽或错误&#xff0c;造成程序未能释放已经不再使用的内存的情况。例如下面这个例子&#xff0c;内存泄漏不易被察觉。 int div() {int a, b;cin >…
阅读更多...
Vue tree自定义滚动条位置

Vue tree自定义滚动条位置

贴一张效果图&#xff0c;我的效果不方便贴出来 实现支持&#xff1a; 1、懒加载 2、普通加载 下面贴关键思想&#xff1a; document有一个获取element元素的方法。 let element document.getElementById(tree); let arr document.querySelectorAll(".nodelModel&quo…
阅读更多...
【JDK常用的API】包装类

【JDK常用的API】包装类

&#x1f36c; 博主介绍&#x1f468;‍&#x1f393; 博主介绍&#xff1a;大家好&#xff0c;我是 hacker-routing &#xff0c;很高兴认识大家~ ✨主攻领域&#xff1a;【渗透领域】【应急响应】 【Java】 【VulnHub靶场复现】【面试分析】 &#x1f389;点赞➕评论➕收藏 …
阅读更多...
【IDEA】安装教程

【IDEA】安装教程

目录 一、安装IDEA 二、激活IDEA 总结 一、安装IDEA 点击idea安装包->点击next->选择安装的路径->勾选创建桌面的快捷方式->勾选将bin目录添加到环境变量->勾选文件夹当做项目工程 打开下面这四个不勾选&#xff0c;勾选表示打开文件将以下面的格式打开 安装…
阅读更多...
Python绘制线图之plt.plot()的介绍以及使用

Python绘制线图之plt.plot()的介绍以及使用

在Python中plt.plot是matplotlib库中的一个函数,用于绘制点和线,并对其样式进行控制,下面这篇文章主要给大家介绍了关于Python绘制线图之plt.plot()的介绍以及使用的相关资料,需要的朋友可以参考下 plt.plot() 是Matplotlib库中用于绘制线图&#xff08;折线图&#xff09;的主…
阅读更多...
YOLOv9改进策略 ：主干篇 | 南开大学提出LSKNet，遥感旋转目标检测新SOTA ，ICCV 2023

YOLOv9改进策略 ：主干篇 | 南开大学提出LSKNet，遥感旋转目标检测新SOTA ，ICCV 2023

💡💡💡本文改进内容： 动态调整特征提取骨干的感受野，以便更有效地处理被检测大小物体的不同的检测能力，也就是说可以有效提升检测数据集当中存在大小目标的检测能力 改进结构图如下： 《YOLOv9魔术师专栏》将从以下各个方向进行创新： 【原创自研模块】【多组合点优…
阅读更多...
OpenEuler华为欧拉系统安装教程及联网配置

OpenEuler华为欧拉系统安装教程及联网配置

OpenEuler简介 openEuler是一款开源操作系统。当前openEuler内核源于Linux&#xff0c;支持鲲鹏及其它多种处理器&#xff0c;能够充分释放计算芯片的潜能&#xff0c;是由全球开源贡献者构建的高效、稳定、安全的开源操作系统&#xff0c;适用于数据库、大数据、云计算、人工智…
阅读更多...
java入门学习Day01

java入门学习Day01

本篇文章主要是学会如何使用IDEA&#xff0c;和运行第一个java文件。 java环境安装&#xff1a;Windows下Java环境配置教程_windows java环境配置-CSDN博客 IDEA安装&#xff1a;IDEA 2023.2.5 最新激活码,注册码&#xff08;亲测好用&#xff09; - 异常教程 以上两个链接…
阅读更多...
安装VS2022社区版

安装VS2022社区版

Visual Studio 2022 平台的使用 1.Visual Studio 的下载地址&#xff1a; https://visualstudio.microsoft.com/zh-hans/downloads/ 2.安装步骤简要记录 耐心等待安装完成 参考链接&#xff1a;Visual Studio 2022安装教程(非常详细)&#xff0c;从零基础入门到精通&…
阅读更多...
Thinkphp - 详细实现网站系统登录功能，附带 Mysql 数据库设置、Web 前端展示界面、信息校验等（详细代码，即设计过程）

Thinkphp - 详细实现网站系统登录功能，附带 Mysql 数据库设置、Web 前端展示界面、信息校验等（详细代码，即设计过程）

前言 登录功能&#xff0c;是我们几乎开发每个系统都必须的模块。 登录功能设计思路&#xff0c;主要包括几个方面。 用户输入网址展示登录页面用户输入用户名&#xff0c;密码等点击登录进行信息校验校验通过之后&#xff0c;记录用户登录信息&#xff0c;跳转指定页面用户校…
阅读更多...
EI期刊和EI会议有哪些不同？别再傻傻分不清

EI期刊和EI会议有哪些不同？别再傻傻分不清

EI工程索引是综合性检索机构&#xff0c;是三个著名学术检索系统之一&#xff0c;EI工程索引也分为EI期刊和EI会议&#xff0c;那么两者有哪些不同&#xff1f;作者又该如何选&#xff1f;本文系统分享一下相关的知识&#xff0c;仅供学术人员参考&#xff1a; 第一、文章质量不…
阅读更多...
RCG自条件是如何添加到 Pixel Generator上的？

RCG自条件是如何添加到 Pixel Generator上的？

在自条件的训练过程中&#xff0c;需要将图像经过Pretrained encoder的表征Rep输入进已有的Pixel Generator上&#xff0c;目前RCG是向四种Pixel Generator上加入了自条件&#xff0c;关于它是如何将rep加到Pixel Generator上的&#xff0c;我来总结一下&#xff1a; 一、Pixel…
阅读更多...
【前端Vue】Vue从0基础完整教程第4篇：面经PC端 - Element (下)【附代码文档】

【前端Vue】Vue从0基础完整教程第4篇：面经PC端 - Element (下)【附代码文档】

Vue从0基础到大神学习完整教程完整教程&#xff08;附代码资料&#xff09;主要内容讲述&#xff1a;vue基本概念&#xff0c;vue-cli的使用&#xff0c;vue的插值表达式&#xff0c;{{ gaga }}&#xff0c;{{ if (obj.age > 18 ) { } }}&#xff0c;vue指令&#xff0c;综合…
阅读更多...
树的重心——树的结构

树的重心——树的结构

树的重心是指对于某个点&#xff0c;将其删除后&#xff0c;可以使得剩余联通块的最大值最小。也就等价于一某个点为根的树&#xff0c;将根删除后&#xff0c;剩余的若干棵子树的大小最小。 例如下图的树的重心就是2。 性质&#xff1a; 性质一&#xff1a;重心的若干棵子树打…
阅读更多...
Vue使用el-statistic和el-card显示大屏中的统计数据

Vue使用el-statistic和el-card显示大屏中的统计数据

​ 一、页面内容&#xff1a; <el-row :gutter"20"><el-col :span"6"><el-card class"box-card"><div><el-statisticgroup-separator",":precision"2":value"value2":title"tit…
阅读更多...
【娱乐】战双帕弥什游戏笔记攻略

【娱乐】战双帕弥什游戏笔记攻略

文章目录 Part.I IntroductionChap.I Information Part.II 新手攻略Chap.I 角色和武器挑选Chap.II 新手意识推荐 Part.II 阵容搭配Chap.I 一拖二Chap.II 毕业队 Reference Part.I Introduction 2019年12月5日全平台公测。 偶然间入坑战双&#xff0c;玩了几天&#xff0c;觉得…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023