Flutter基础 -- Flutter布局练习(小项目)

目录

1. Splash 布局(第一页)

1.1 目标

1.2 当前效果图

1.3 创建 Splash 界面

1.4 设置 MaterialApp

1.5 设置 Splash 背景色

1.6 布局 Splash 界面

1.7 总结

2. Splash 圆角图片

2.1 目标

2.2 当前效果图

2.3 蓝湖下载图片

2.4 图片导入项目

2.5 编写 assets 索引

2.6 编写标志 Logo

2.7 总结

3. Splash 文字

3.1 目标

3.2 当前效果图

3.3 蓝湖标注查看

3.4 字体下载导入

3.5 编写 TextStyle

3.6 加入间距

3.7 总结

4. Splash 倒计时

4.1 目标

4.2 当前效果图

4.3 改成有状态组件

4.4 实现倒计时

4.5 重构文字显示函数

4.6 完整代码

4.7 总结

1. Welcome 图片尺寸适应(第二页)

1.1 目标

1.2 当前效果图

1.3 设置全局字体

1.4 界面布局、标题

1.5 图片尺寸适应

1.6 总结

2. Welcome 导航切换

2.1 目标

2.2 当前效果图

2.3 底部按钮

2.4 导航切换

2.5 总结

1. login 布局(第三页)

1.1 目标

1.2 布局

1.3 总结

2. login 登录表单

2.1 目标

2.2 当前效果图

2.3 登录表单

2.4 总结

3. login 按钮抽取

3.1 目标

3.2 当前效果图

3.3 按钮组件抽取

3.4 登录按钮

3.5 欢迎按钮

3.6 总结


博主wx:yuanlai45_csdn 博主qq:2777137742

后期会创建粉丝群,为同学们提供分享交流平台以及提供官方发送的福利奖品~

1. Splash 布局(第一页)

1.1 目标

  • 查看蓝湖标注
  • 初始项目
  • 创建 splash 界面

github 目标图片在里面

https://github.com/ducafecat/flutter_quickstart_learn

1.2 当前效果图

1.3 创建 Splash 界面

lib/pages/splash.dart

import 'package:flutter/material.dart';import '../common/index.dart';class SplashPage extends StatelessWidget {const SplashPage({Key? key}) : super(key: key);// 主视图Widget _buildView(BuildContext context) {return Text("splash");}@overrideWidget build(BuildContext context) {return Scaffold(body: Center(child: _buildView(context)),);}
}

1.4 设置 MaterialApp

lib/main.dart

import 'package:flutter/material.dart';import 'pages/splash.dart';void main() {runApp(const MyApp());
}class MyApp extends StatelessWidget {const MyApp({Key? key}) : super(key: key);@overrideWidget build(BuildContext context) {return MaterialApp(title: 'Flutter Quick Start',// 首页home: const SplashPage(),// 关闭 debug 标签debugShowCheckedModeBanner: false,);}
}

1.5 设置 Splash 背景色

lib/common/app_colors.dart

import 'package:flutter/material.dart';/// 颜色配置
class AppColors {/// splash 背景色static const Color backgroundSplash = Color(0xff0274bc);
}

lib/pages/splash.dart

import '../common/index.dart';...@overrideWidget build(BuildContext context) {return Scaffold(backgroundColor: AppColors.backgroundSplash, // 背景色body: _buildView(context),);}

1.6 布局 Splash 界面

lib/pages/splash.dart

  // 主视图Widget _buildView(BuildContext context) {return Column(mainAxisAlignment: MainAxisAlignment.center,crossAxisAlignment: CrossAxisAlignment.center,children: [// 图标Container(color: Colors.white,width: 120,height: 120,),// 标题const Text("Online Market"),// 倒计时const Text("10"),],);}

1.7 总结

  • 蓝湖标注平台 布局、尺寸、字体、颜色...

  • 初始项目 pages common 目录创建

  • 配置 MaterialApp.home 首页

  • 配置 Scaffold 脚手架背景色

  • 全局颜色管理 AppColors

  • 布局 Splash 界面

2. Splash 圆角图片

2.1 目标

  • 导入图片资源
  • 使用层叠布局编写 logo

2.2 当前效果图

2.3 蓝湖下载图片

依次选中图片,选中 PNG 格式,IOS 类型,3X 高清,最后下载当前切图        

2.4 图片导入项目

放入你的项目 assets/images/3.0x/logo.pn

生成 1x 2x 图片

插件地址 Flutter GetX Generator - 猫哥 - Visual Studio Marketplace

修改 pubspec.yaml

flutter:...assets:- assets/images/

2.5 编写 assets 索引

编写 lib/common/assets.dart, 将 assets/images/files.txt 内容复制进去,这个文件是插件生成的,防止文件太多,手写出错

/// 图片资源
class AssetsImages {static const logoPng = 'assets/images/logo.png';
}

lib/pages/splash.dart

  // 图标Widget _buildLogo() {return Stack(alignment: Alignment.center,children: [// 底部Container(width: 120,height: 120,decoration: BoxDecoration(color: Colors.white,borderRadius: BorderRadius.circular(120 / 2),),),// 图标Image.asset(AssetsImages.logoPng,width: 84,height: 80,),],);}
  // 主视图Widget _buildView(BuildContext context) {return Column(mainAxisAlignment: MainAxisAlignment.center,crossAxisAlignment: CrossAxisAlignment.center,children: [// 图标_buildLogo(),// 标题const Text("Online Market"),// 倒计时const Text("10"),],);}

2.7 总结

  • 下载蓝湖切图 选择 png 格式 ios 模式 3x 尺寸
  • 使用猫哥插件生成 1x 2x 图片,创建资源索引管理
  • 使用层叠布局创建 logo
  • 使用函数进一步的管理代码

3. Splash 文字

3.1 目标

  • 导入字体文件
  • 配置文字样式

3.2 当前效果图

3.3 蓝湖标注查看

需要关注的属性有:

  • font-size 字体大小
  • font-family 字体名称
  • font-weight 字体重度
  • color 颜色
  • line-height 行高

3.4 字体下载导入

google 字体下载

https://fonts.google.com/

下载后导入 assets/fonts/

编辑 pubspec.yaml

  fonts:- family: Poppinsfonts:- asset: assets/fonts/Poppins-Light.ttfweight: 300- asset: assets/fonts/Poppins-Regular.ttfweight: 400- asset: assets/fonts/Poppins-Medium.ttfweight: 500- asset: assets/fonts/Poppins-Bold.ttfweight: 700

3.5 编写 TextStyle

lib/pages/splash.dart

  // 标题const Text("Online Market",style: TextStyle(fontSize: 19,fontFamily: "Poppins",fontWeight: FontWeight.bold,color: Colors.white,height: 22 / 19,),),

fontFamily 中写入字体名称 Poppins

height 文本跨度的行高将为 [fontSize] 的倍数并且正好是 fontSize *height 逻辑像素 高。换行的时候才有意义

3.6 加入间距

标题和图标间距 24,和计数器 27

lib/pages/splash.dart

  // 主视图Widget _buildView(BuildContext context) {return Column(mainAxisAlignment: MainAxisAlignment.center,crossAxisAlignment: CrossAxisAlignment.center,children: [// 图标_buildLogo(),const SizedBox(height: 24),// 标题const Text("Online Market",style: TextStyle(fontSize: 19,fontFamily: "Poppins",fontWeight: FontWeight.bold,color: Colors.white,height: 22 / 19,),),const SizedBox(height: 27),// 倒计时const Text("10",style: TextStyle(fontSize: 19,fontFamily: "Poppins",fontWeight: FontWeight.bold,color: Colors.white,height: 22 / 19,),),],);}

3.7 总结

  • 导入字体 pubspec 中详细明确 字体名称、 字体文件字体weight
  • 用不到的字体文件不用方式 assets/fonts 目录中
  • 设置文字样式 fontSizefontFamilyfontWeightcolor
  • 具体值的间距用 SizedBox 来配置

4. Splash 倒计时

4.1 目标

  • 使用有状态组件
  • 倒计时更新组件

4.2 当前效果图

4.3 改成有状态组件

lib/pages/splash.dart

import 'package:flutter/foundation.dart';
import 'package:flutter/material.dart';import '../common/index.dart';class SplashPage extends StatefulWidget {const SplashPage({Key? key}) : super(key: key);@overrideState<SplashPage> createState() => _SplashPageState();
}class _SplashPageState extends State<SplashPage> {// 图标Widget _buildLogo() {return Stack(alignment: Alignment.center,children: [// 底部Container(width: 120,height: 120,decoration: BoxDecoration(color: Colors.white,borderRadius: BorderRadius.circular(120 / 2),),),// 图标Image.asset(AssetsImages.logoPng,width: 84,height: 80,),],);}// 主视图Widget _buildView(BuildContext context) {return Column(mainAxisAlignment: MainAxisAlignment.center,crossAxisAlignment: CrossAxisAlignment.center,children: [// 图标_buildLogo(),const SizedBox(height: 24),// 标题const Text("Online Market",style: TextStyle(fontSize: 19,fontFamily: "Poppins",fontWeight: FontWeight.bold,color: Colors.white,height: 22 / 19,),),const SizedBox(height: 27),// 倒计时Text("0",style: const TextStyle(fontSize: 19,fontFamily: "Poppins",fontWeight: FontWeight.bold,color: Colors.white,height: 22 / 19,),),],);}@overrideWidget build(BuildContext context) {return Scaffold(backgroundColor: AppColors.backgroundSplash,body: Center(child: _buildView(context)),);}
}

4.4 实现倒计时

lib/pages/splash.dart

计数 num

  // 计数 numfinal duration = 10;int number = 0;

倒计时函数

  // 倒计时Future<void> _countdown() async {number = duration;for (int i = 0; i < duration; i++) {await Future.delayed(const Duration(seconds: 1), () {if(mounted == ture) {setState(() {number--;});}});// 倒计时结束, 进入 welcomeif (number == 0) {if (kDebugMode) {print("倒计时结束");}}}}

注意 await async 异步函数的语法

初始执行

  @overridevoid initState() {super.initState();_countdown();}

打印显示

  // 主视图Widget _buildView(BuildContext context) {...// 倒计时Text(number > 0 ? "$number" : "done",style: const TextStyle(fontSize: 19,fontFamily: "Poppins",fontWeight: FontWeight.bold,color: Colors.white,height: 22 / 19,),),

4.5 重构文字显示函数

macos 下是 option + enter , 也可以在组件上 右键 -> 重构...

文字显示函数

  // 文字显示Text _buildText(String text) {return Text(text,style: const TextStyle(fontSize: 19,fontFamily: "Poppins",fontWeight: FontWeight.bold,color: Colors.white,height: 22 / 19,),);}

主视图代码

  // 主视图Widget _buildView(BuildContext context) {return Center(child: Column(mainAxisAlignment: MainAxisAlignment.center,children: [// logo_buildLogo(),const SizedBox(height: 24),// 标题_buildText("Online Market"),const SizedBox(height: 27),// 计数器_buildText("10"),// end],),);}

4.6 完整代码

lib/pages/splash.dart

import 'package:flutter/material.dart';import '../common/app_colors.dart';
import '../common/assets.dart';class SplashPage extends StatefulWidget {const SplashPage({Key? key}) : super(key: key);@overrideState<SplashPage> createState() => _SplashPageState();
}class _SplashPageState extends State<SplashPage> {// 计数变量final duration = 3;int number = 0;// 倒计时函数Future<void> _countdown() async {number = duration;for (var i = 0; i < duration; i++) {await Future.delayed(const Duration(seconds: 1), () {if (mounted == true) {setState(() {number--;});}});if (number == 0) {print("倒计时结束");}}}@overridevoid initState() {super.initState();_countdown();}// logoWidget _buildLogo() {return Stack(alignment: Alignment.center,children: [// 底部Container(width: 120,height: 120,decoration: BoxDecoration(color: Colors.white,borderRadius: BorderRadius.circular(120 / 2),),),// 图片Image.asset(AssetsImages.logoPng,width: 84,height: 80,),],);}// 文字显示Text _buildText(String text) {return Text(text,style: const TextStyle(fontSize: 19,fontFamily: "Poppins",fontWeight: FontWeight.bold,color: Colors.white,height: 22 / 19,),);}// 主视图Widget _buildView(BuildContext context) {return Center(child: Column(mainAxisAlignment: MainAxisAlignment.center,children: [// logo_buildLogo(),const SizedBox(height: 24),// 标题_buildText("Online Market"),const SizedBox(height: 27),// 计数器_buildText(number > 0 ? "$number" : "done"),// end],),);}@overrideWidget build(BuildContext context) {return Scaffold(backgroundColor: AppColors.backgroundSplash,body: _buildView(context),);}
}

4.7 总结

  • 无状态组件重构成有状态组件
  • 使用 Future.delayed 方式实现倒计时
  • 使用 三目运算符 控制显示

1. Welcome 图片尺寸适应(第二页)

1.1 目标

  • 全局配置样式、字体
  • 图片适配高宽
  • 布局代码练习

1.2 当前效果图

 

1.3 设置全局字体

lib/main.dart

class MyApp extends StatelessWidget {const MyApp({Key? key}) : super(key: key);@overrideWidget build(BuildContext context) {return MaterialApp(...// 样式theme: ThemeData(primarySwatch: Colors.orange,fontFamily: "Poppins", // 字体),

字体全局放在 theme fontFamily 属性中

1.4 界面布局、标题

lib/pages/welcome.dart

import 'package:flutter/material.dart';/// 欢迎页面
class WelcomePage extends StatelessWidget {const WelcomePage({Key? key}) : super(key: key);// 主视图Widget _buildView() {return Column(mainAxisAlignment: MainAxisAlignment.center,children: [// 标题const Padding(padding: EdgeInsets.symmetric(horizontal: 30),child: Text("Browse & Order All Products at Any Time",textAlign: TextAlign.center,style: TextStyle(fontSize: 20,fontFamily: "Poppins",fontWeight: FontWeight.bold,color: Color(0xff2B2A2A),height: 23 / 20,),),),// 图Container(),// 底部按钮Container(),],);}@overrideWidget build(BuildContext context) {return Scaffold(body: _buildView(),);}
}

标题代码抽取函数,整理代码

  // 标题Padding _buildTitle() {return const Padding(padding: EdgeInsets.symmetric(horizontal: 30),child: Text("Browse & Order All Products at Any Time",textAlign: TextAlign.center,style: TextStyle(fontSize: 20,fontFamily: "Poppins",fontWeight: FontWeight.bold,color: Color(0xff2B2A2A),height: 23 / 20,),),);}
  // 主视图Widget _buildView() {return Column(children: [const SizedBox(height: 100),// 标题_buildTitle(),...

1.5 图片尺寸适应

从蓝湖下载图片导入项目,这里不再重复叙述

lib/pages/welcome.dart

  // 图片Image _buildImage() {return Image.asset(AssetsImages.welcomePng,height: 300,width: double.infinity,fit: BoxFit.none,//fit:BoxFit.fitWidth);}
  // 主视图Widget _buildView() {return Column(mainAxisAlignment: MainAxisAlignment.center,children: [// 标题_buildTitle(),const SizedBox(height: 70),// 图_buildImage(),// 底部按钮_buildBtns(),],);}

1.6 总结

  • 通过 ThemeData.fontFamily 设置全局字体
  • padding: EdgeInsets.symmetric(horizontal: 30) 水平 Padding 距离
  • 图片组件 Image.fit 设置宽高适配
  • 布局第一规则 从上往下

2. Welcome 导航切换

2.1 目标

  • 布局规则 “从上往下、从左往右”
  • 全局按钮颜色样式
  • 布局训练 横向、纵向 混合

2.2 当前效果图

2.3 底部按钮

lib/pages/welcome.dart

  // goto 登录页面void onLogin(BuildContext context) {}// 底部按钮Padding _buildBtns(BuildContext context) {return Padding(padding: const EdgeInsets.symmetric(horizontal: 24),child: Row(children: [// skipTextButton(onPressed: () => onLogin(context),child: const Text("Skip",style: TextStyle(fontSize: 15,fontWeight: FontWeight.w300,color: Color(0xff2B2A2A),),),),// 撑开const Expanded(child: SizedBox(),),// Get StartedContainer(height: 42,width: 140,clipBehavior: Clip.antiAlias,decoration: const BoxDecoration(borderRadius: BorderRadius.all(Radius.circular(18),),),child: ElevatedButton(onPressed: () => onLogin(context),style: ButtonStyle(elevation: MaterialStateProperty.all(0),minimumSize: MaterialStateProperty.all(Size.zero),),child: const Text("Get Started",style: TextStyle(fontSize: 16,fontWeight: FontWeight.w300,color: Colors.white,),),),),],),);}
  // 主视图Widget _buildView(BuildContext context) {return Column(mainAxisAlignment: MainAxisAlignment.center,children: [// 标题_buildTitle(),const SizedBox(height: 70),// 图_buildImage(),const SizedBox(height: 70),// 底部按钮_buildBtns(context),],);}

2.4 导航切换

splash 倒计时结束进入 welcome 界面

  // 倒计时Future<void> _countdown() async {number = duration;for (int i = 0; i < duration; i++) {...// 倒计时结束, 进入 welcomeif (number == 0) {Navigator.pushReplacement(context,MaterialPageRoute(builder: (context) => const WelcomePage()));}}}

2.5 总结

设计稿布局分析 “从上往下、从左往右”
先写布局代码结构
注意命名 _buildXXX 开头都是私有布局函数
导航 Navigator.pushReplacement 进入新界面并替换当前

1. login 布局(第三页)

1.1 目标

看标注布局界面(千锤百炼就会了)

1.2 布局

lib/pages/login.dart

  // 登录表单Widget _buildForm() {return Container();}
	// 主视图Widget _buildView() {return Container(padding: const EdgeInsets.symmetric(horizontal: 15),color: AppColors.backgroundSplash,child: Column(mainAxisAlignment: MainAxisAlignment.center,children: [// 图标Image.asset(AssetsImages.logoPng,width: 60,),const SizedBox(height: 20),// 主标const Text("Let’s Sign You In",style: TextStyle(fontSize: 20,color: Colors.white,fontWeight: FontWeight.bold,),),const SizedBox(height: 10),// 子标const Text("Welcome back, you’ve been missed!",style: TextStyle(fontSize: 13,color: Colors.white,fontWeight: FontWeight.w300,),),const SizedBox(height: 50),// 表单_buildForm(),],),);}
  @overrideWidget build(BuildContext context) {return Scaffold(body: _buildView(),);}

1.3 总结

  • 记住布局规则 “从上往下、从左往右”
  • 用函数拆分视图结构

2. login 登录表单

2.1 目标

  • 编写表单
  • 有效性检查

2.2 当前效果图

2.3 登录表单

lib/pages/login.dart

  // 账号输入是否有效bool isUserNameValid = false;
  // 登录表单Widget _buildForm() {return Container(padding: const EdgeInsets.fromLTRB(20, 50, 20, 20),decoration: BoxDecoration(color: Colors.white,borderRadius: BorderRadius.circular(35),),child: Column(crossAxisAlignment: CrossAxisAlignment.start,children: [// Username or E-Mailconst Text("Username or E-Mail",style: TextStyle(fontSize: 15,color: Color(0xff838383),fontWeight: FontWeight.w300,),),TextField(onChanged: (value) {bool valid = false;if (value.length >= 6) {valid = true;} else {valid = false;}setState(() {isUserNameValid = valid;});},decoration: InputDecoration(hintText: "@",// labelText: "Username or E-Mail",// labelStyle: const TextStyle(//   fontSize: 15,//   color: Color(0xff838383),//   fontWeight: FontWeight.w300,// ),prefixIcon: Image.asset(AssetsImages.iconUserPng,width: 23,height: 23,),suffixIcon: isUserNameValid == true? const Icon(Icons.done,color: Colors.green,): null,),),// 间距const SizedBox(height: 35),// Passwordconst Text("Password",style: TextStyle(fontSize: 15,color: Color(0xff838383),fontWeight: FontWeight.w300,),),TextField(obscureText: true,decoration: InputDecoration(hintText: "6 digits",// labelText: "Password",// labelStyle: const TextStyle(//   fontSize: 15,//   color: Color(0xff838383),//   fontWeight: FontWeight.w300,// ),prefixIcon: Image.asset(AssetsImages.iconLockPng,width: 23,height: 23,),suffixIcon: TextButton(onPressed: () {},child: const Text("Forget?",style: TextStyle(fontSize: 15,color: Color(0xff0274bc),fontWeight: FontWeight.w500,),),),),),// 间距const SizedBox(height: 30),// Sign In// 间距const SizedBox(height: 16),// Don’t have an account?  + Sign UpRow(mainAxisAlignment: MainAxisAlignment.center,children: [// 文字const Text("Don’t have an account? ",style: TextStyle(fontSize: 15,color: Color(0xff171717),fontWeight: FontWeight.w300,),),// 按钮TextButton(onPressed: () {},child: const Text("Sign Up",style: TextStyle(fontSize: 15,color: Color(0xff0274bc),fontWeight: FontWeight.bold,),),),],),],),);}

2.4 总结

  • 通过 TextField.decoration 属性进行装饰
  • TextField.obscureText 开启密码

3. login 按钮抽取

3.1 目标

  • 抽取公共按钮组件
  • 修改成纯 ElevatedButton 按钮

3.2 当前效果图

3.3 按钮组件抽取

lib/common/widgets.dart

import 'package:flutter/material.dart';/// 按钮组件
class ButtonWidget extends StatelessWidget {const ButtonWidget({Key? key,this.height,this.widget,this.radius,this.onPressed,this.text,}) : super(key: key);/// 文字final String? text;/// 高度final double? height;/// 宽度final double? widget;/// 圆角final double? radius;/// 点击事件final void Function()? onPressed;@overrideWidget build(BuildContext context) {return ElevatedButton(onPressed: onPressed,style: ButtonStyle(// 阴影高度elevation: MaterialStateProperty.all(0),// 最小尺寸minimumSize: MaterialStateProperty.all(Size(widget ?? double.infinity, height ?? double.infinity)),// 形状 圆角shape: MaterialStateProperty.all(RoundedRectangleBorder(borderRadius: BorderRadius.all(Radius.circular(radius ?? 18),),),),),child: Text(// 文字text ?? "",// 文字样式style: const TextStyle(fontSize: 16,fontWeight: FontWeight.w300,color: Colors.white,),),);}
}

3.4 登录按钮

lib/pages/login.dart

  // 登录表单Widget _buildForm() {...// Sign InButtonWidget(text: 'Sign In',onPressed: () {},height: 60,widget: double.infinity,radius: 18,),

3.5 欢迎按钮

lib/pages/welcome.dart

  // 底部按钮Padding _buildBtns(BuildContext context) {...// Get StartedButtonWidget(text: "Get Started",height: 42,widget: 140,radius: 32,onPressed: () => onLogin(context),),
  // goto 登录页面void onLogin(BuildContext context) {Navigator.push(context,MaterialPageRoute(builder: (context) => const LoginPage()),);}

3.6 总结

  • 公共组件类抽取方法
  • ElevatedButton 组件属性配置

创作不易,希望读者三连支持 💖
赠人玫瑰,手有余香 💖

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

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

相关文章

在编程Python的时候发生ModuleNotFoundError: No module named distutils报错怎么办

1.先查看Python版本 首先我们先去打开终端就是先widr再输入cmd 然后进去在输入Python -V要注意大小写 我的版本是3.9.7版本但是我使用的PyCharm 是 2021.1.1 x64版本没有办法主动去识别因为这个版太低了你的Python版本很高所以无法识别 2.解决方法 只需要把你的Python现版…

微信公众号【原子与分子模拟】: 熔化温度 + 超导电性 + 电子化合物 + 分子动力学模拟 + 第一性原理计算 + 数据处理程序

往期内容主要涵盖&#xff1a; 熔化温度 超导电性 电子化合物 分子动力学模拟 第一性原理计算 数据处理程序 【1】熔化温度 分子动力学 LAMMPS 相关内容 【文献分享】分子动力学模拟 LAMMPS 熔化温度 晶体缺陷 熔化方法 LAMMPS 文献&#xff1a;金属熔化行为的局域…

vscode ctrl+鼠标左键无法跳转

打开设置&#xff0c;搜索intel…… 将这个智能感知改成default就可以了&#xff0c;我之前是在disable处。 分析了一下&#xff0c;其实跳转功能主要是根据上下文语法分析来实现的&#xff0c;并不是简单得全文匹配&#xff0c;因此需要相关得语法分析工具。 那么为什么默认式…

微软Edge浏览器深度解析:功能、同步、隐私与安全

微软Edge浏览器是微软公司开发的一款网页浏览器,它基于Chromium内核,提供了快速、安全和兼容性良好的网页浏览体验。以下是关于微软Edge浏览器的详细信息和使用指南: 微软Edge浏览器的主要特点: 1. 基于Chromium内核: 渲染引擎:Chromium内核是基于开源项目Blink的,它…

可视化数据科学平台在信贷领域应用系列五:零代码可视化建模

信贷风控模型是金融机构风险管理的核心工具&#xff0c;在信贷风险管理工作中扮演着至关重要的角色。随着信贷市场的环境不断变化&#xff0c;信贷业务的风险日趋复杂化和隐蔽化&#xff0c;开发和应用准确高效的信贷风控模型显得尤为重要。信贷风险控制面临着越来越大的挑战和…

问你为什么选择Kafka,你会怎么回答?

可靠的含义在百度百科的解释是&#xff1a;可以信赖、可以相信、可靠的朋友。那Kafka究竟是不是一个可靠的朋友呢&#xff1f;既然全世界绝大部分高可用系统都有Kafka的支持&#xff0c;Kafka必定有其过人之处&#xff0c;跟着我来分析分析。 另外多提一嘴Kafka在GitHub目前已…

六西格玛培训,带你解锁职场超能力工具!

当提及六西格玛培训的精髓时&#xff0c;我们不得不提到那些强大而实用的工具&#xff0c;它们如同探险者的指南针&#xff0c;引导我们走向卓越。今天&#xff0c;就让我们一起揭开这些神秘工具的面纱&#xff0c;探寻六西格玛背后的智慧。 首先&#xff0c;DMAIC流程是六西格…

cesium 漫游

token记得换成您自己的&#xff01;&#xff01;&#xff01; 申请cesium的token 官网【Cesium: The Platform for 3D Geospatial】 <template><div id"cesiumContatiner"><!-- <div id"mapContainer1"></div> --></di…

员工离职删除自己做的文件违法么?如何杜绝这种现象?

员工离职时删除自己做的文件是否违法&#xff0c;需要视情况而定&#xff1a; 如果删除的是个人自己的文件&#xff1a; 在这种情况下&#xff0c;员工删除的是自己制作的、不涉及公司机密或经营数据的个人文件&#xff0c;通常不会被视为违法行为。 如果删除的是公司的文件…

探索 CSV 模块:Python 中 CSV 数据持久化的最佳实践

&#x1f340; 前言 博客地址&#xff1a; CSDN&#xff1a;https://blog.csdn.net/powerbiubiu &#x1f44b; 简介 本章节介绍使用 CSV 文件来存储数据&#xff0c;CSV 文件是一种常见的数据格式&#xff0c;可以用来存储和交换表格数据。CSV 文件由一系列的行组成&#x…

SQL Developer管理RESTful 服务

RESTful 服务依赖于ORDS&#xff08;Oracle REST Data Services&#xff09;&#xff0c;所以在进行本实验前&#xff0c;请先确认数据库服务器上的ORDS服务已启动&#xff1a; $ systemctl status ords ● ords.service - Oracle REST Data ServicesLoaded: loaded (/etc/sys…

23中设计模式之一— — — —命令模式的详细介绍

命令模式 Command Pattern讲解 概念描述模式结构主要角色模式的UIM类图模式优点模式缺点应用场景实例演示类图代码演示运行结果 概念 命令模式&#xff08;别名&#xff1a;动作&#xff0c;事务&#xff09; 命令模式是一种行为设计模式&#xff0c;将一个请求封装为一个对象…

【qt】项目移植

项目移植 一.前言二.同名问题三.具体操作1.修改文件名2.修改类名3.修改一些不能自动改的名4.修改.ui文件5.删除原来自动生成的ui_xxx.h文件6.修改头文件 四.导入项目五.使用导入的项目六.项目建议 一.前言 终于概率论考完了,有时间了,接着上个项目,我们继续来完成我们的多窗口开…

【Pycharm】功能介绍

1.Code Reformat Code 格式化代码&#xff0c;可以帮助我们去自动调整空格等&#xff0c;根据python语法规范自动调整 2.Settings 1.创建py文件默认填充模版 3.读写py文件编码格式一致性 顶部代码指定的编码方式作用&#xff1a; 可以保证python2/3解释器在读取文件的时候按…

jmeter并发测试

目录 常用的压测工具jmeter安装配置并执行新建测试计划 Test Plan添加线程组练习01&#xff1a;共10个线程&#xff0c;每秒钟启动一个线程&#xff08;需要10秒&#xff09;&#xff0c;每个线程发送两个请求练习02&#xff1a;共10个线程&#xff0c;1秒中内启动完毕&#xf…

kali中安装、卸载程序教程

1、安装教程 ①、使用apt安装 apt update &#xff08;先更新apt&#xff09; apt-get install xxxx(xxx为需要安装的软件名)②、使用dpkg安装 dpkg –i deb的软件包名&#xff08;需要在软件包的目录下使用&#xff0c;不然就要把地址加上&#xff09;二、卸载教程 ①、使…

ViewModel原理分析

认识 ViewModel ViewModel 是一种用来存储和管理UI相关数据的类。 ViewModel 的作用可以从两个方面去理解&#xff1a; UI界面控制器&#xff1a;在最初的MVC模式中&#xff0c;由于 Activity / Fragment 承担的职责过重&#xff0c;因此在后续的 MVP、MVVM 模式中&#xff…

基于JSP技术的人事管理系统

你好呀&#xff0c;我是计算机学长猫哥&#xff01;如果有相关需求&#xff0c;文末可以找到我的联系方式。 开发语言&#xff1a;Java 数据库&#xff1a;MySQL 技术&#xff1a;JSP技术 工具&#xff1a;浏览器&#xff08;如360浏览器、谷歌浏览器、QQ浏览器等&#xff…

深度神经网络——什么是扩散模型?

1. 概述 在人工智能的浩瀚领域中&#xff0c;扩散模型正成为技术创新的先锋&#xff0c;它们彻底改变了我们处理复杂问题的方式&#xff0c;特别是在生成式人工智能方面。这些模型基于高斯过程、方差分析、微分方程和序列生成等坚实的数学理论构建。 业界巨头如Nvidia、Google…

【C语言】文件操作(下卷)

前言 在上一卷中&#xff0c;我们知道了文件指针、文件的打开和关闭&#xff08;打开其他位置的文件&#xff09;、文件的顺序读写&#xff08;其中的fputc()、fgetc()&#xff09;&#xff0c;这一卷中&#xff0c;将继续讲解文件操作未讲到的地方。 内容有点多&#xff0c;…