【Flutter】AppBar、TabBar和TabBarView

news2024/9/21 2:50:12

🔥 本文由 程序喵正在路上 原创，CSDN首发！
💖 系列专栏：Flutter学习
🌠 首发时间：2024年5月26日
🦋 欢迎关注🖱点赞👍收藏🌟留言🐾

目录

  • AppBar、TabBar和TabBarView
    • MaterialApp去掉debug图标
    • AppBar自定义顶部按钮图标、颜色
    • TabBar组件
    • TabBar、TabBarView实现类似头条顶部导航
    • BottomNavigationBar的页面中使用TabBar
    • PreferredSize组件
    • 自定义KeepAliveWrapper缓存页面
    • 监听TabController改变事件

AppBar、TabBar和TabBarView

MaterialApp去掉debug图标

return MaterialApp(
  title: 'Flutter Demo',
  theme: ThemeData(
    primarySwatch: Colors.blue,
  ),
  debugShowCheckedModeBanner: false,	//去掉Debug图标
  home: const HomePage(),
);

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

AppBar 常用属性：

属性描述
leading在标题前面显示的一个控件，在首页通常显示应用的 logo；在其他页面通常显示未返回按钮
title标题，通常显示为当前界面的标题文字，可以放组件
actions通常使用 IconButton 来表示，可以放按钮组
bottom通常放 tabBar，标题下面显示一个 Tab 导航栏
backgroundColor导航背景颜色
iconTheme图标样式
centerTitle标题是否居中显示
import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      debugShowCheckedModeBanner: false, //去掉Debug图标
      home: const HomePage(),
    );
  }
}

class HomePage extends StatefulWidget {
  const HomePage({super.key});

  @override
  State<HomePage> createState() => _HomePageState();
}

class _HomePageState extends State<HomePage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        backgroundColor: Colors.red,
        leading: IconButton(	//左侧按钮
            icon: const Icon(Icons.menu),
            onPressed: () {
              print('menu Pressed');
            }),
        title: const Text('AppBar'),
        actions: [	//右侧按钮
          IconButton(
              icon: const Icon(Icons.search),
              onPressed: () {
                print('Search Pressed');
              }),
          IconButton(
              icon: const Icon(Icons.more_horiz),
              onPressed: () {
                print('more_horiz Pressed');
              })
        ],
      ),
      body: const Text("头条滑动导航"),
    );
  }
}

在这里插入图片描述

TabBar组件

TabBar 常见属性：

属性描述
tabs显示的标签内容，一般使用 Tab 对象，也可以是其他的 Widget
controllerTabController 对象
isScrollable是否可滚动
indicatorColor指示器颜色
indicatorWeight指示器高度
indicatorPadding底部指示器的Padding
indicator指示器decoration，例如边框等
indicatorSize指示器的大小计算方式，TabBarIndicatorSize.lable：跟文字等宽；TabBarIndicatorSize.tab：跟每个 tab 等宽
labelColor被选中的 label 的颜色
labelStyle被选中的 label 的 style
labelPadding每个 label 的 padding 值
unselectedLabelColor未被选中的 label 的颜色
unselectedLabelStyle未被选中的 label 的 style

TabBar、TabBarView实现类似头条顶部导航

  1. 混入 SingleTickerProviderStateMixin

    class _HomePageState extends State<HomePage>
    with SingleTickerProviderStateMixin {}

  2. 定义 TabController

    late TabController _tabController;

  //生命周期函数：当组件初始化的时候就会触发
  //输入inits可快速生成该方法
  @override
  void initState() {
    super.initState();
    _tabController = TabController(length: 3, vsync: this);
  }

  3. 配置 TabBar 和 TabBarView

    在 Scaffold 的 bottom 属性中配置 TabBar，在 body 属性中配置 TabBarView

    import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      debugShowCheckedModeBanner: false, //去掉Debug图标
      home: const HomePage(),
    );
  }
}

class HomePage extends StatefulWidget {
  const HomePage({super.key});

  @override
  State<HomePage> createState() => _HomePageState();
}

class _HomePageState extends State<HomePage>
    with SingleTickerProviderStateMixin {
  late TabController _tabController;

  //生命周期函数：当组件初始化的时候就会触发
  //输入inits可快速生成该方法
  @override
  void initState() {
    super.initState();
    _tabController = TabController(length: 8, vsync: this);
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Flutter Demo'),
        backgroundColor: Colors.blue,
        leading: IconButton(
            icon: const Icon(Icons.menu),
            onPressed: () {
              print('menu Pressed');
            }),
        actions: [
          IconButton(
              icon: const Icon(Icons.search),
              onPressed: () {
                print('Search Pressed');
              }),
          IconButton(
              icon: const Icon(Icons.more_horiz),
              onPressed: () {
                print('more_horiz Pressed');
              })
        ],
        bottom: TabBar(
          isScrollable: true, //导航栏及页面是否可以滚动
          indicatorColor: Colors.white,
          indicatorWeight: 2,
          indicatorPadding: const EdgeInsets.all(5),
          indicatorSize: TabBarIndicatorSize.tab,
          indicator: BoxDecoration(
            color: Colors.white,
            borderRadius: BorderRadius.circular(10),
          ),
          labelColor: Colors.blue,
          unselectedLabelColor: Colors.white,
          labelStyle: const TextStyle(fontSize: 14),
          unselectedLabelStyle: const TextStyle(fontSize: 12),
          controller: _tabController,
          tabs: const [
            Tab(child: Text("关注")),
            Tab(child: Text("推荐")),
            Tab(child: Text("视频")),
            Tab(child: Text("财经")),
            Tab(child: Text("科技")),
            Tab(child: Text("热点")),
            Tab(child: Text("国际")),
            Tab(child: Text("更多")),
          ],
        ),
      ),
      body: TabBarView(
        controller: _tabController,
        children: [
          ListView(
            children: const [ListTile(title: Text("我是关注列表"))],
          ),
          ListView(
            children: const [ListTile(title: Text("我是推荐列表"))],
          ),
          ListView(
            children: const [ListTile(title: Text("我是视频列表"))],
          ),
          ListView(
            children: const [ListTile(title: Text("我是财经列表"))],
          ),
          ListView(
            children: const [ListTile(title: Text("我是科技列表"))],
          ),
          ListView(
            children: const [ListTile(title: Text("我是热点列表"))],
          ),
          ListView(
            children: const [ListTile(title: Text("我是国际列表"))],
          ),
          ListView(
            children: const [ListTile(title: Text("我是更多列表"))],
          ),
        ],
      ),
    );
  }
}

    在这里插入图片描述

BottomNavigationBar的页面中使用TabBar

在这里插入图片描述

回到前面仿闲鱼首页底部导航这个程序，如果我们想在这个页面使用 TabBar，那么我们就需要在 tabs.dart 中的 Scaffold 的 body 属性中添加 TarBarView 组件，但是 body 中我们已经写了自动切换页面的代码，无法再添加 TarBarView 组件，这个时候该怎么办呢？

在这里插入图片描述

其实，我们可以来到 home.dart 这个页面，在这里再套一层 Scaffold，然后在这里配置 TarBar，步骤和前面一样，我们将代码复制过来，然后为了让导航栏可以显示在最上面，我们可以将 TarBar 直接写在 title 里面

修改后的 home.dart：

import 'package:flutter/material.dart';

class HomePage extends StatefulWidget {
  const HomePage({super.key});

  @override
  State<HomePage> createState() => _HomePageState();
}

class _HomePageState extends State<HomePage>
    with SingleTickerProviderStateMixin {
  late TabController _tabController;

  @override
  void initState() {
    super.initState();
    _tabController = TabController(length: 8, vsync: this);
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: PreferredSize(
        preferredSize: const Size.fromHeight(40),
        child: AppBar(
          backgroundColor: Colors.white,
          elevation: 1, //阴影
          title: SizedBox(
            height: 30,
            child: TabBar(
              isScrollable: true, //导航栏及页面是否可以滚动
              indicatorColor: Colors.red,
              labelColor: Colors.red,
              unselectedLabelColor: Colors.black,
              labelStyle: const TextStyle(fontSize: 14),
              unselectedLabelStyle: const TextStyle(fontSize: 14),
              controller: _tabController,
              tabs: const [
                Tab(child: Text("关注")),
                Tab(child: Text("推荐")),
                Tab(child: Text("视频")),
                Tab(child: Text("财经")),
                Tab(child: Text("科技")),
                Tab(child: Text("热点")),
                Tab(child: Text("国际")),
                Tab(child: Text("更多")),
              ],
            ),
          ),
        ),
      ),
      body: TabBarView(
        controller: _tabController,
        children: [
          ListView(
            children: [
              Padding(
                padding: const EdgeInsets.all(15),
                child: Column(
                  children: [
                    Image.network(
                        "https://xixi-web-tlias.oss-cn-guangzhou.aliyuncs.com/1.jpg"),
                    const SizedBox(height: 10),
                    Image.network(
                        "https://xixi-web-tlias.oss-cn-guangzhou.aliyuncs.com/2.jpg"),
                    const SizedBox(height: 10),
                    Image.network(
                        "https://xixi-web-tlias.oss-cn-guangzhou.aliyuncs.com/3.jpg"),
                    const SizedBox(height: 10),
                    Image.network(
                        "https://xixi-web-tlias.oss-cn-guangzhou.aliyuncs.com/4.jpg"),
                    const SizedBox(height: 10),
                    Image.network(
                        "https://xixi-web-tlias.oss-cn-guangzhou.aliyuncs.com/5.jpg"),
                    const SizedBox(height: 10),
                    Image.network(
                        "https://xixi-web-tlias.oss-cn-guangzhou.aliyuncs.com/6.jpg"),
                  ],
                ),
              ),
            ],
          ),
          ListView(
            children: const [ListTile(title: Text("我是推荐列表"))],
          ),
          ListView(
            children: const [ListTile(title: Text("我是视频列表"))],
          ),
          ListView(
            children: const [ListTile(title: Text("我是财经列表"))],
          ),
          ListView(
            children: const [ListTile(title: Text("我是科技列表"))],
          ),
          ListView(
            children: const [ListTile(title: Text("我是热点列表"))],
          ),
          ListView(
            children: const [ListTile(title: Text("我是国际列表"))],
          ),
          ListView(
            children: const [ListTile(title: Text("我是更多列表"))],
          ),
        ],
      ),
    );
  }
}

效果：

在这里插入图片描述

PreferredSize组件

PreferredSize 组件可以配置 appBar 的高度

Scaffold(
  appBar: PreferredSize(
    preferredSize: const Size.fromHeight(40),
    child: AppBar(),
  ),
  body: TabBarView(),
);

自定义KeepAliveWrapper缓存页面

在前面实现的顶部导航中，如果我们在关注页面滑动到底部，然后我们再点击其他页面，接着我们返回关注页面，会发现它自动恢复到起始的状态。如果我们想让关注页面不恢复，该怎么做呢？

在 Flutter 中，我们可以通过 AutomaticKeepAliveClientMixin 来快速实现页面缓存功能，但是通过混入的方式实现不是很优雅， 所以我们有必要对AutomaticKeepAliveClientMixin 混入进行封装。

我们将其封装成一个类或者叫组件 KeepAliveWrapper，在 lib 目录下新建 tools 目录，在 tools 下新建 keepAliveWrapper.dart 文件，内容如下：

import 'package:flutter/material.dart';

class KeepAliveWrapper extends StatefulWidget {
  const KeepAliveWrapper(
      {super.key, @required this.child, this.keepAlive = true});

  final Widget? child;
  final bool keepAlive;

  @override
  State<KeepAliveWrapper> createState() => _KeepAliveWrapperState();
}

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

  @override
  bool get wantKeepAlive => widget.keepAlive;

  @override
  void didUpdateWidget(covariant KeepAliveWrapper oldWidget) {
    if (oldWidget.keepAlive != widget.keepAlive) {
      // keepAlive 状态需要更新，实现在 AutomaticKeepAliveClientMixin 中
      updateKeepAlive();
    }
    super.didUpdateWidget(oldWidget);
  }
}

然后，在需要使用的地方 home.dart 导入该文件，在需要缓存的代码外面套上一层 KeepAliveWrapper 即可：

import 'package:flutter/material.dart';
import '../../tools/keepAliveWrapper.dart';	//导入

class HomePage extends StatefulWidget {
  const HomePage({super.key});

  @override
  State<HomePage> createState() => _HomePageState();
}

class _HomePageState extends State<HomePage>
    with SingleTickerProviderStateMixin {
  late TabController _tabController;

  @override
  void initState() {
    super.initState();
    _tabController = TabController(length: 8, vsync: this);
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: PreferredSize(
        preferredSize: const Size.fromHeight(40),
        child: AppBar(
          backgroundColor: Colors.white,
          elevation: 1, //阴影
          title: SizedBox(
            height: 30,
            child: TabBar(
              isScrollable: true, //导航栏及页面是否可以滚动
              indicatorColor: Colors.red,
              labelColor: Colors.red,
              unselectedLabelColor: Colors.black,
              labelStyle: const TextStyle(fontSize: 14),
              unselectedLabelStyle: const TextStyle(fontSize: 14),
              controller: _tabController,
              tabs: const [
                Tab(child: Text("关注")),
                Tab(child: Text("推荐")),
                Tab(child: Text("视频")),
                Tab(child: Text("财经")),
                Tab(child: Text("科技")),
                Tab(child: Text("热点")),
                Tab(child: Text("国际")),
                Tab(child: Text("更多")),
              ],
            ),
          ),
        ),
      ),
      body: TabBarView(
        controller: _tabController,
        children: [
          //缓存第一个页面
          KeepAliveWrapper(
            child: ListView(
              children: [
                Padding(
                  padding: const EdgeInsets.all(15),
                  child: Column(
                    children: [
                      Image.network(
                          "https://xixi-web-tlias.oss-cn-guangzhou.aliyuncs.com/1.jpg"),
                      const SizedBox(height: 10),
                      Image.network(
                          "https://xixi-web-tlias.oss-cn-guangzhou.aliyuncs.com/2.jpg"),
                      const SizedBox(height: 10),
                      Image.network(
                          "https://xixi-web-tlias.oss-cn-guangzhou.aliyuncs.com/3.jpg"),
                      const SizedBox(height: 10),
                      Image.network(
                          "https://xixi-web-tlias.oss-cn-guangzhou.aliyuncs.com/4.jpg"),
                      const SizedBox(height: 10),
                      Image.network(
                          "https://xixi-web-tlias.oss-cn-guangzhou.aliyuncs.com/5.jpg"),
                      const SizedBox(height: 10),
                      Image.network(
                          "https://xixi-web-tlias.oss-cn-guangzhou.aliyuncs.com/6.jpg"),
                    ],
                  ),
                ),
              ],
            ),
          ),
          ListView(
            children: const [ListTile(title: Text("我是推荐列表"))],
          ),
          ListView(
            children: const [ListTile(title: Text("我是视频列表"))],
          ),
          ListView(
            children: const [ListTile(title: Text("我是财经列表"))],
          ),
          ListView(
            children: const [ListTile(title: Text("我是科技列表"))],
          ),
          ListView(
            children: const [ListTile(title: Text("我是热点列表"))],
          ),
          ListView(
            children: const [ListTile(title: Text("我是国际列表"))],
          ),
          ListView(
            children: const [ListTile(title: Text("我是更多列表"))],
          ),
        ],
      ),
    );
  }
}

监听TabController改变事件

在 initState 方法中，我们可以通过调用 addListener 方法来监听 TabController 的改变事件，包括点击、滑动等

@override
void initState() {
  super.initState();
  _tabController = TabController(length: 8, vsync: this);

  //监听_tabController的改变事件
  _tabController.addListener(() {
    if (_tabController.animation!.value == _tabController.index) {
      print(_tabController.index); //获取点击或滑动页面的索引值
    }
  });
}

当我们点击或滑动到其他页面时，我们就可以获取到对应页面的索引值

在这里插入图片描述

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

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

相关文章

到底该用英文括号还是中文括号？

到底该用英文括号还是中文括号？

这篇博客写的还挺详细的&#xff0c;不错。
阅读更多...
最重要的时间表示，柯桥外贸俄语小班课

最重要的时间表示，柯桥外贸俄语小班课

в第四格 1、与表示“钟点”的数词词组连用 例&#xff1a; в шесть часов утра 在早上六点 в пять тридцать 在五点半 2、与表示“星期”的名词连用 例&#xff1a; в пятницу 在周五 в следующий понедельник …
阅读更多...
使用printf的两种方法，解决printf不能使用的问题

使用printf的两种方法，解决printf不能使用的问题

使用printf的两种方法&#xff0c;解决printf不能使用的问题 一、微库法 我们使用printf前要加上重定向fputc //重定义fputc函数 int fputc(int ch, FILE *f) { while((USART1->SR&0X40)0);//循环发送,直到发送完毕 USART1->DR (uint8_t) ch; return…
阅读更多...
数字图像处理冈塞雷斯第四版课后习题答案【英文原版】

数字图像处理冈塞雷斯第四版课后习题答案【英文原版】

第二章 第三章 . 第四章 傅里叶变换是一个线性过程&#xff0c;而计算梯度的平方根和平方根则是非线性运算。傅里叶变换可以用来计算微分的差值(如问题4.50)&#xff0c;但必须在空间域中直接计算平方和平方根值。 (a)实际上&#xff0c;由于高通操作&#xff0c;环有一个暗中心…
阅读更多...
LabelMe下载及关键点检测数据标注

LabelMe下载及关键点检测数据标注

本文关键点数据集链接，提取码：x1pk 1.LabelMe下载 这部分内容和YOLOv8_seg的标注软件是一样的，使用anaconda创建虚拟环境安装LabelMe，指令如下： conda create -n labelme python=3.6 -y conda activate labelme conda install pyqt conda install pillow pip install la…
阅读更多...
Java进阶学习笔记23——API概述

Java进阶学习笔记23——API概述

API&#xff1a; API&#xff08;Application Programming Interface&#xff09;应用程序编程接口 就是Java帮我们写好了一些程序&#xff1a;如类、方法等等&#xff0c;我们直接拿过来用就可以解决一些问题。 为什么要学别人写好的程序&#xff1f; 不要重复造轮子。开发…
阅读更多...
【Spring Boot】分层开发 Web 应用程序（含实例）

【Spring Boot】分层开发 Web 应用程序（含实例）

分层开发 Web 应用程序 1.应用程序分层开发模式&#xff1a;MVC1.1 了解 MVC 模式1.2 MVC 和三层架构的关系 2.视图技术 Thymeleaf3.使用控制器3.1 常用注解3.1.1 Controller3.1.2 RestController3.1.3 RequestMapping3.1.4 PathVariable 3.2 将 URL 映射到方法3.3 在方法中使用…
阅读更多...
【JVM实践与应用】

【JVM实践与应用】

JVM实践与应用 1.类加载器(加载、连接、初始化)1.1 类加载要完成的功能1.2 加载类的方式1.3 类加载器1.4 双亲委派模型1.5自定义ClassLoader1.6 破坏双亲委派模型2.1 类连接主要验证内容2.2 类连接中的解析2.3 类的初始化3.1 类的初始化时机3.2 类的初始化机制和顺序3.2 类的卸…
阅读更多...
电子电器架构 - AUTOSAR软件架构Current Features in a Nutshell

电子电器架构 - AUTOSAR软件架构Current Features in a Nutshell

电子电器架构 - AUTOSAR软件架构Current Features in a Nutshell 我是穿拖鞋的汉子，魔都中坚持长期主义的汽车电子工程师。 老规矩，分享一段喜欢的文字，避免自己成为高知识低文化的工程师： 屏蔽力是信息过载时代一个人的特殊竞争力，任何消耗你的人和事，多看一眼都是你的…
阅读更多...
数据清洗操作及众所周知【数据分析】

数据清洗操作及众所周知【数据分析】

各位大佬好 &#xff0c;这里是阿川的博客 &#xff0c; 祝您变得更强 个人主页&#xff1a;在线OJ的阿川 大佬的支持和鼓励&#xff0c;将是我成长路上最大的动力 阿川水平有限&#xff0c;如有错误&#xff0c;欢迎大佬指正 前面的博客 数据分析—技术栈和开发环境搭建 …
阅读更多...
7.Redis之String编码方式应用场景业务

7.Redis之String编码方式应用场景业务

1.内部编码 字符串类型的内部编码有 3 种&#xff1a; • int&#xff1a;8 个字节&#xff08;64位&#xff09;的⻓整型。 • embstr&#xff1a;⼩于等于 39 个字节的字符串。压缩字符串.适用于表示比较短的字符串。 • raw&#xff1a;⼤于 39 个字节的字符串。普通字…
阅读更多...
红蓝对抗-HW红蓝队基本知识（网络安全学习路线笔记）

红蓝对抗-HW红蓝队基本知识（网络安全学习路线笔记）

第一, 什么是蓝队 蓝队&#xff0c;一般是指网络实战攻防演习中的攻击一方。 蓝队一般会采用针对目标单位的从业人员&#xff0c;以及目标系统所在网络内的软件、硬件设备同时执行多角度、全方位、对抗性的混合式模拟攻击手段&#xff1b;通过技术手段实现系统提权、控制业务、…
阅读更多...
阻塞信号集和未决信号集_代码实现

阻塞信号集和未决信号集_代码实现

1. 程序验证内容 将编号为0,1,2添加到阻塞信号集中&#xff0c;i<信号编号时&#xff0c;发出信号&#xff0c;观察未决信号集状态 当解除阻塞后&#xff0c;原先的信号是否执行&#xff0c;执行顺序是什么 2. 代码实现 #include <unistd.h> #include <stdlib.h…
阅读更多...
AI数据面临枯竭

AI数据面临枯竭

Alexandr Wang&#xff1a;前沿研究领域需要大量当前不存在的数据&#xff0c;未来会受到这个限制 Alexandr Wang 强调了 AI 领域面临的数据问题。 他指出&#xff0c;前沿研究领域&#xff08;如多模态、多语言、专家链式思维和企业工作流&#xff09;需要大量当前不存在的数…
阅读更多...
鸿蒙 DevEcoStudio:发布进度条通知

鸿蒙 DevEcoStudio:发布进度条通知

使用notificationManager及wantAgent实现功能import notificationManager from ohos.notificationManager import wantAgent from ohos.app.ability.wantAgent Entry Component struct Index {State message: string 发布进度条通知progressValue: number0async publicDownloa…
阅读更多...
【数据结构（邓俊辉）学习笔记】二叉树02——遍历

【数据结构（邓俊辉）学习笔记】二叉树02——遍历

文章目录 0.概述1. 先序遍历1.1 递归版1.1.1 实现1.1.2 时间复杂度1.1.3 问题 1.2 迭代版11.3 迭代版21.3.1 思路1.3.2 实现1.3.3 实例 2. 中序遍历2.1 递归形式2.2 迭代形式2.2.1 观察2.2.2 思路&#xff08;抽象总结&#xff09;2.2.3 构思 实现2.2.4 分摊分析 3. 后序遍历3…
阅读更多...
单条16g和双条8g哪个好

单条16g和双条8g哪个好

单条16g和双条8g各有优劣，具体选择要根据个人需求和电脑配置来决定。 以下是一些参考信息： •单条16g内存的价格比双条8g内存的价格低，而且16g的内存容量大，一条内存十分的方便。 •两条8g内存可以组成双通道，电脑运行速度要快一些。 •对于普通使用电脑的人群与热衷于…
阅读更多...
linux下的实时同步服务简介与实验（sersync+nfs+rsync）

linux下的实时同步服务简介与实验（sersync+nfs+rsync）

目录 实时同步是什么定时同步的缺陷实时同步简介 Sersync简介rsyncinotify-tools与rsyncsersync架构的区别&#xff1f; SerSync工作流程SerSync同步架构Sersync配置详解执行文件配置文件 NFSSersyncRsync实时同步服务实验0. 实验简介1. 实验架构2. 实验环境3. 实验步骤front主…
阅读更多...
【调试笔记-20240521-Linux-编译 QEMU/x86_64 可运行的 OpenWrt 固件】

【调试笔记-20240521-Linux-编译 QEMU/x86_64 可运行的 OpenWrt 固件】

调试笔记-系列文章目录 调试笔记-20240521-Linux-编译 QEMU/x86_64 可运行的 OpenWrt 固件 文章目录 调试笔记-系列文章目录调试笔记-20240521-Linux-编译 QEMU/x86_64 可运行的 OpenWrt 固件 前言一、调试环境操作系统&#xff1a;Ubuntu 22.04.4 LTS编译环境调试目标 二、调…
阅读更多...
etcd基础知识总结

etcd基础知识总结

文章目录 核心概念什么是etcd为什么需要etcd分布式中CAP理论etcd中常用的术语etcd的特性etcd的应用场景etcd的核心架构小结 etcd搭建小结 Etcdctl小结 etcd网关和grpc-GetwayEtcd 网关模式grpc-Geteway小结 etcd读请求执行流程Etcd 写请求执行流程写请求之QuotaKVServer模块写请…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023