自定义博客皮肤VIP专享

*博客头图:

格式为PNG、JPG,宽度*高度大于1920*100像素,不超过2MB,主视觉建议放在右侧,请参照线上博客头图

请上传大于1920*100像素的图片!

博客底图:

图片格式为PNG、JPG,不超过1MB,可上下左右平铺至整个背景

栏目图:

图片格式为PNG、JPG,图片宽度*高度为300*38像素,不超过0.5MB

主标题颜色:

RGB颜色,例如:#AFAFAF

Hover:

RGB颜色,例如:#AFAFAF

副标题颜色:

RGB颜色,例如:#AFAFAF

自定义博客皮肤

-+

Allen-

吃好喝好,长生不老 ~

  • 博客(233)
  • 收藏
  • 关注

原创 基础入门 Flutter for OpenHarmony:Positioned 定位组件详解

在布局设计中,有时我们需要将组件放置在特定的位置,而不是按照常规的流式布局排列。Flutter 提供了 Positioned 组件,它可以在 Stack 中实现绝对定位,让子组件精确地放置在指定的位置。这种定位方式非常适合创建叠加效果、悬浮按钮、角标、徽章等需要精确位置控制的场景。

2026-02-15 18:20:53 158

原创 基础入门 Flutter for OpenHarmony:IndexedStack 索引堆叠组件详解

在应用开发中,我们经常需要实现页面或内容的切换效果。传统的做法是使用条件判断来显示不同的组件,但这种方式效率较低。Flutter 提供了 IndexedStack 组件,它可以在多个子组件之间快速切换,同时保持所有子组件的状态,是实现标签页、引导页、多步骤表单等场景的理想选择。

2026-02-15 18:19:26 158

原创 基础入门 Flutter for OpenHarmony:DecoratedBox 装饰盒子组件详解

在用户界面设计中,装饰是提升视觉效果的重要手段。通过装饰,我们可以为组件添加背景颜色、渐变效果、边框、阴影、圆角等多种视觉元素。Flutter 提供了 DecoratedBox 组件,让开发者能够灵活地为子组件添加各种装饰效果。颜色填充:纯色背景,最基础的装饰效果渐变效果:线性渐变、径向渐变、扫描渐变边框:统一边框或四边不同的边框样式阴影:盒阴影效果,增加立体感圆角:圆角矩形或圆形背景图片:网络图片或本地图片作为背景。

2026-02-15 17:59:45 137

原创 基础入门 Flutter for OpenHarmony:AspectRatio 宽高比组件详解

在用户界面设计中,保持组件的宽高比是非常重要的需求。无论是图片展示、视频播放器还是卡片布局,都需要确保组件始终保持特定的宽高比例。Flutter 提供了 AspectRatio 组件,让开发者能够轻松控制子组件的宽高比。宽高比(Aspect Ratio)是指组件宽度与高度的比例关系。16:9:标准高清视频比例,广泛用于视频和现代显示器4:3:传统电视屏幕比例,经典的照片比例1:1:正方形比例,常用于头像和社交媒体3:2:摄影常用比例,35mm 胶片的标准比例4:5。

2026-02-15 17:49:51 187

原创 基础入门 Flutter for OpenHarmony:Flexible 弹性布局组件详解

在响应式布局设计中,弹性布局是一种非常重要的布局方式。通过弹性布局,子组件可以根据父容器的可用空间自动调整大小,实现不同屏幕尺寸的适配。Flutter 提供了 Flexible 组件,让开发者能够轻松创建弹性布局效果。自动调整大小:子组件根据可用空间自动调整比例分配:可以按比例分配剩余空间灵活适配:适配不同屏幕尺寸和方向嵌套支持:可以多层嵌套实现复杂布局。

2026-02-15 17:42:42 194

原创 基础入门 Flutter for OpenHarmony:Transform 变换组件详解

Transform 是 Flutter 中用于对子组件进行各种变换的组件。通过 Transform,我们可以实现旋转、缩放、平移、倾斜等视觉效果,为应用增添丰富的动态感和交互性。Transform 使用矩阵变换来修改子组件的外观,但不会影响其布局。Transform 组件是 Flutter 中实现视觉效果变换的核心组件。Transform 组件的基本概念:了解了变换的原理和特点旋转变换:学会了使用 Transform.rotate 实现旋转效果缩放变换。

2026-02-15 17:40:57 218

原创 基础入门 Flutter for OpenHarmony:ClipRRect 圆角裁剪组件详解

在现代移动应用设计中,圆角是一种非常常见的视觉效果。无论是按钮、卡片、图片还是其他 UI 元素,圆角都能让界面看起来更加柔和、现代。Flutter 提供了 ClipRRect 组件,让开发者能够轻松地为任何组件添加圆角效果。ClipRRect 组件是 Flutter 中实现圆角效果的核心组件。ClipRRect 组件的基本概念:了解了圆角裁剪的原理和重要性borderRadius 参数的使用:学会了使用各种方式设置圆角clipBehavior 参数:了解了不同的裁剪行为圆角图片的实现。

2026-02-15 17:28:33 288

原创 基础入门 Flutter for OpenHarmony:Opacity 透明度组件详解

在用户界面设计中,透明度是一种强大的视觉工具。通过调整元素的透明度,我们可以创造出层次感、强调重点、实现淡入淡出效果,以及表达元素的状态。Flutter 提供了 Opacity 组件,让开发者能够轻松地控制子组件的透明度。Opacity 组件是 Flutter 中控制透明度的核心组件。Opacity 组件的基本概念:了解了透明度在 UI 设计中的重要性Opacity 的基本用法:学会了使用 opacity 参数控制透明度Opacity 的各种属性。

2026-02-15 17:09:14 159

原创 基础入门 Flutter for OpenHarmony:Divider 分割线组件详解

在用户界面设计中,分割线(Divider)是一种简单却非常重要的视觉元素。它用于在界面中创建视觉分隔,帮助用户理解内容的层次结构,提升信息的可读性。Flutter 提供了 Divider 组件,让开发者能够轻松地在应用中添加各种风格的分割线。除了使用默认的 Divider,我们还可以创建各种自定义风格的分割线,让界面更加独特和美观。Divider 组件虽然简单,但在 UI 设计中扮演着重要的角色。Divider 组件的基本概念:了解了分割线在 UI 设计中的重要性Divider 的基本用法。

2026-02-15 17:07:26 177

原创 基础入门 Flutter for OpenHarmony:Spacer 间距组件详

在 Flutter 布局系统中,Spacer 是一个非常实用但经常被忽视的组件。它是一个能够自动填充剩余空间的"弹性间距"组件,专门用于 Flex 容器(如 Row、Column)中。通过 Spacer,我们可以轻松实现各种复杂的布局效果,而不需要手动计算间距大小。Spacer 组件虽然简单,但在 Flutter 布局中扮演着重要的角色。Spacer 组件的基本概念:了解了 Spacer 的作用和特点Spacer 的基本用法:学会了创建基本的弹性间距flex 属性的使用:掌握了按比例分配空间的方法。

2026-02-15 17:05:53 175

原创 基础入门 Flutter for OpenHarmony:Icon 图标组件详解

在移动应用开发中,图标(Icon)是最基础也是最重要的视觉元素之一。一个好的图标能够直观地传达功能含义,提升用户体验,减少用户的学习成本。Flutter 提供了强大而灵活的 Icon 组件,让开发者能够轻松地在应用中使用各种图标。在开始学习 Icon 组件之前,我们需要先了解 Flutter 的图标系统。Flutter 提供了多种图标来源,每种都有其特点和适用场景。字体图标:通过 iconfont 等工具生成的字体文件SVG 图标:通过包加载 SVG 格式图标图片图标。

2026-02-15 17:03:22 260

原创 基础入门 Flutter for OpenHarmony:permission_handler 权限管理详解

在现代移动应用开发中,权限管理是一个至关重要的环节。随着用户隐私保护意识的增强和操作系统安全机制的不断完善,应用在访问敏感资源(如相机、麦克风、位置信息、通讯录等)之前,必须先获得用户的明确授权。这不仅是为了遵守各平台的应用审核规范,更是对用户隐私权的尊重。在 Flutter for OpenHarmony 应用开发中,是一个非常实用的权限管理插件。它提供了统一的跨平台 API,让开发者能够以一致的方式请求和检查设备权限,大大简化了权限管理的复杂度。

2026-02-15 14:25:56 199

原创 基础入门 Flutter for OpenHarmony:CheckBox 复选框组件详解

在 Flutter for OpenHarmony 应用开发中,CheckBox(复选框)是一种用于在多个选项中选择一个或多个的控件。用户可以同时选择多个选项,常用于兴趣爱好选择、技能选择、权限设置等场景。Checkbox(),CheckBox 是 Flutter for OpenHarmony 中实现多选功能的重要组件,通过合理使用可以创建灵活的选择界面。

2026-02-12 11:09:39 224

原创 基础入门 Flutter for OpenHarmony:RadioButton 单选按钮组件详解

在 Flutter for OpenHarmony 应用开发中,RadioButton(单选按钮)是一种用于在多个选项中选择一个的控件。同一组单选按钮中,用户只能选择一个选项,常用于性别选择、等级选择、模式切换等场景。value: 1,value: 1,),视觉效果:放大后的单选按钮更容易点击,适合触摸屏设备。RadioButton 是 Flutter for OpenHarmony 中实现单选功能的重要组件,通过合理使用可以创建直观易用的选择界面。

2026-02-12 11:07:35 233

原创 基础入门 Flutter for OpenHarmony:ExpansionTile 可展开项组件详解

在 Flutter for OpenHarmony 应用开发中,ExpansionTile(可展开项)是一种可以展开和收起的列表项,常用于显示层级结构信息、FAQ 列表、设置选项等。用户点击后可以查看更多详细内容。title: const Text('自定义颜色'),children: const [ListTile(title: Text('内容'))],属性说明iconColor:展开状态下的图标颜色:折叠状态下的图标颜色textColor:展开状态下的文字颜色:折叠状态下的文字颜色。

2026-02-12 10:57:42 175

原创 基础入门 Flutter for OpenHarmony:TabBar 标签栏组件详解

在 Flutter for OpenHarmony 应用开发中,TabBar(标签栏)是一种用于组织和切换不同内容区域的导航组件。它通常位于页面顶部,通过水平滚动的标签让用户在不同内容之间快速切换。TabBar(),tabs: const [Tab(text: '标签1'), Tab(text: '标签2')],应用场景:适合现代化的 UI 设计,圆角指示器看起来更柔和。TabBar(Tab(icon: Icon(Icons.home), text: '首页'),

2026-02-12 10:54:10 263

原创 基础入门 Flutter for OpenHarmony:BottomSheet 底部面板详解

在 Flutter for OpenHarmony 应用开发中,BottomSheet(底部面板)是一种从屏幕底部滑出的面板组件,常用于展示菜单、选项、表单或详细信息。BottomSheet 遵循 Material Design 规范,提供流畅的动画效果和直观的交互体验。BottomSheet 是 Flutter for OpenHarmony 中实现底部交互的核心组件,通过合理使用可以创建流畅的底部面板体验。

2026-02-12 10:41:55 501

原创 基础入门 Flutter for OpenHarmony:Chip 标签组件详解

在 Flutter for OpenHarmony 应用开发中,Chip(标签)是一种用于展示简短信息的组件,常用于表示类别、标签、选择状态等。Chip 组件设计遵循 Material Design 规范,提供多种变体以满足不同的使用场景。Chip(label: const Text('圆角标签'),),Chip 是 Flutter for OpenHarmony 中展示简短信息的灵活组件,通过合理使用可以创建美观实用的标签展示界面。

2026-02-12 10:40:27 508

原创 基础入门 Flutter for OpenHarmony:Stack 堆叠布局详解

在 Flutter for OpenHarmony 应用开发中,Stack(堆叠布局)是一种允许子组件相互重叠的布局方式。与 Row 和 Column 不同,Stack 中的子组件按照从后到前的顺序堆叠,后面的子组件会覆盖在前面的子组件之上。Stack 是 Flutter for OpenHarmony 中实现层叠布局的核心组件,通过合理使用可以创建丰富多样的界面效果。

2026-02-12 10:29:30 615

原创 基础入门 Flutter for OpenHarmony:Slider 滑块组件详解

在 Flutter for OpenHarmony 应用开发中,Slider(滑块)是一种用于选择连续数值的控件。用户可以通过拖动滑块在指定范围内选择一个数值,适用于音量调节、亮度调整、进度选择等场景。Slider(Slider 是 Flutter for OpenHarmony 中表示连续数值选择的强大组件,通过合理使用可以创建直观易用的数值输入界面。

2026-02-12 10:23:00 594

原创 基础入门 Flutter for OpenHarmony:Switch 开关组件详解

在 Flutter for OpenHarmony 应用开发中,Switch(开关)是一种用于二元状态切换的常见控件。用户可以通过点击或滑动来切换开关的状态,适用于表示"开/关"、“是/否”、"启用/禁用"等二元选择的场景。Switch(Switch(activeColor: const Color(0xFF10B981), // 绿色Switch 是 Flutter 中表示二元状态的简单而强大的组件,通过合理使用可以创建直观易用的设置界面。

2026-02-12 10:09:45 533

原创 基础入门 Flutter for OpenHarmony:Card 卡片组件详解

在现代移动应用设计中,卡片已经成为最流行的信息展示方式之一。无论是商品列表、文章卡片、用户信息还是设置选项,卡片都能以清晰、美观的方式展示内容。Flutter 的Card组件提供了 Material Design 风格的卡片样式,自带阴影和圆角效果,非常适合用于组织相关内容。Card(),child: Text('自定义样式的卡片'),),),),),Card 是 Flutter 中最常用的展示组件之一,掌握它的各种用法对于创建美观的界面至关重要。

2026-02-11 21:05:18 506

原创 基础入门 Flutter for OpenHarmony:TextField 文本输入组件详解

在移动应用开发中,文本输入是最常见的交互方式之一。无论是登录表单、搜索框、评论输入还是数据填写,都需要使用文本输入组件。Flutter 的TextField组件提供了强大而灵活的文本输入功能,支持各种输入类型、样式定制和输入验证。TextField(labelText: '邮箱',),if (!// 显示错误},TextField 是 Flutter 中最重要的文本输入组件,掌握它的各种用法对于开发高质量的用户输入体验至关重要。

2026-02-11 20:56:48 327

原创 基础入门 Flutter for OpenHarmony:Scaffold — 页面框架的基础

在 Flutter 开发中,Scaffold是构建 Material Design 风格页面的核心组件。它提供了页面结构的框架,包括顶部导航栏(AppBar)、底部导航栏、抽屉菜单、悬浮按钮等常用页面元素。Scaffold 的设计理念是将页面的各个部分组合在一起,形成一个完整的页面布局。Scaffold(title: const Text('自定义导航栏'),),),),actions: [),),],),child: Text('页面内容'),),💡小贴士:使用。

2026-02-11 20:52:35 313

原创 基础入门 Flutter for OpenHarmony:ListView 列表组件详解

在移动应用开发中,列表是最常见的 UI 组件之一。无论是联系人列表、新闻列表还是商品列表,都需要使用滚动列表来展示数据。Flutter 的ListView组件提供了强大而灵活的列表展示功能,支持垂直和水平滚动,内置了滚动优化和性能优化机制。除了使用标准组件,也可以完全自定义列表项的样式。Container(),),Text('自定义列表项',),),Text('这是完全自定义样式的列表项',),),],),

2026-02-11 20:47:11 199

原创 基础入门 Flutter for OpenHarmony:深入理解 StatelessWidget 与 StatefulWidget

在 Flutter 中,一切皆 Widget。Widget 是 Flutter 应用的构建块,用于描述 UI 的配置信息。(无状态组件)和(有状态组件)。StatelessWidget 和 StatefulWidget 是 Flutter 状态管理的基础,理解它们的区别和使用场景对于开发高效的应用至关重要。

2026-02-11 20:42:13 399

原创 基础入门 Flutter for OpenHarmony:Row 与 Column — 线性布局利器

在 Flutter 的布局体系中,Row和Column是最基础也最常用的两个布局组件,它们都继承自Flex组件,用于实现线性布局。简单来说,Row 将子组件水平排列,Column 将子组件垂直排列。Row 和 Column 是 Flutter 布局的基石,掌握它们的使用对于构建复杂界面至关重要。

2026-02-11 20:35:02 504

原创 基础入门 Flutter for OpenHarmony:Container — 布局的万能容器

在 Flutter 的组件体系中,Container可以说是最基础也是最常用的组件之一。它就像一个万能的容器,可以包含一个子组件,并为其提供丰富的装饰和布局属性。无论是设置背景色、圆角、阴影,还是添加内边距、外边距,Container 都能轻松实现。Container 是 Flutter 中最基础也最重要的组件之一,掌握它的各种属性和用法对于构建美观的界面至关重要。

2026-02-11 20:28:52 249

原创 基础入门 Flutter for OpenHarmony:Image 图片组件使用指南

在移动应用开发中,图片是传递信息、美化界面的重要元素。Flutter 的Image组件提供了强大而灵活的图片加载和显示功能,支持多种图片来源和丰富的显示效果。Image 组件是 Flutter 中处理图片显示的核心组件,掌握其各种属性和用法对于创建美观的应用至关重要。

2026-02-11 20:23:46 530

原创 基础入门 Flutter for OpenHarmony:Button 按钮组件详解

在 Flutter 应用开发中,按钮是用户与应用交互的核心组件之一。Flutter 提供了多种按钮组件,满足不同的设计需求和交互场景。它们都基于构建,严格遵循 Material Design 规范,确保在不同平台上都能提供一致的用户体验。虽然 TextButton 默认样式已经相当简洁,但在实际应用中,我们经常需要根据设计需求进行定制。styleFrom方法提供了丰富的样式配置选项。),child: const Text('自定义样式'),通过调整。

2026-02-11 20:14:38 552

原创 基础入门 Flutter for Harmony:Text 组件详解

Text是 Flutter 中最基础且最重要的组件之一,用于在屏幕上显示文本内容。它支持丰富的样式设置、文本对齐、溢出处理等特性。'这段文本可以被选中复制。长按这段文字,然后选择复制。',},Text 组件是 Flutter 中最基础且强大的文本显示组件,掌握其各种属性和用法对于构建优秀的用户界面至关重要。

2026-02-11 20:00:12 544

原创 React Native 鸿蒙跨平台开发:在线学习平台 - 进度追踪与成就系统

在线学习平台的进度追踪与成就系统是提升用户学习动机的核心功能,通过直观的进度展示和成就奖励,激发用户持续学习的热情。本文将深入讲解如何综合使用。欢迎加入开源鸿蒙跨平台社区:https://openharmonycrossplatform.csdn.net。以下是鸿蒙 RN 开发中实现「学习进度系统」的所有。使用SVG Circle实现环形进度条。构建专业的学习进度追踪系统。实现课程进度信息展示卡片。实现成就徽章展示和状态。

2026-02-10 12:08:10 140

原创 React Native 鸿蒙跨平台开发:地图导航应用 - SVG标记与路径规划

地图导航应用是移动应用的核心功能之一,通过SVG标记和路径规划,帮助用户准确定位和导航。本文将深入讲解如何综合使用。以下是鸿蒙 RN 开发中实现「地图导航应用」的所有。使用SVG ViewBox创建自适应地图画布。构建专业的地图导航应用。实现位置信息标记和显示。实现导航路径规划和显示。

2026-02-10 11:42:20 188

原创 React Native 鸿蒙跨平台开发:社交动态流 - 瀑布流列表与下拉刷新

社交动态流是社交媒体应用的核心页面,通过瀑布流布局和下拉刷新功能,帮助用户高效浏览和互动。本文将深入讲解如何综合使用。使用FlatList实现瀑布流布局,支持多列展示。以下是鸿蒙 RN 开发中实现「社交动态流」的所有。实现动态信息卡片,展示用户动态内容。构建专业的社交动态流应用。实现列表加载状态展示。

2026-02-10 11:33:20 202

原创 React Native 鸿蒙跨平台开发:智能健康监测应用 - SVG图表与实时数据可视化

智能健康监测应用是现代健康管理的重要工具,通过精美的SVG图表和实时数据可视化,帮助用户全面了解自己的健康状况。本文将深入讲解如何综合使用 、、 和 构建专业的健康监测应用。健康监测应用数据层展示层交互层心率数据步数数据睡眠数据心率监测步数统计睡眠分析实时更新下拉刷新动画效果SVG波形图SVG环形图SVG面积图react-native-svgLinearGradientMaskedViewProgressBar使用SVG绘制实时心率波形,配合LinearGradient实现渐变效果,定时器模拟实时数据更新

2026-02-10 10:45:35 174

原创 React Native 鸿蒙跨平台开发:数据可视化仪表盘设计与实现

仪表盘是数据可视化应用的核心组件,能够直观地展示关键指标和实时数据。本文将深入讲解如何综合使用 、 和 构建专业的数据可视化仪表盘系统。仪表盘系统数据层展示层交互层数据获取数据处理状态管理指标卡片进度组件图表组件实时更新用户交互动画效果LinearGradientProgressBarMaskedViewAnimated API技术深度解析:技术深度解析:技术深度解析:技术深度解析:四、高级应用场景4.1 多维度数据对比4.2 告警阈值监控4.3 历史趋势对比五、总结本文深入讲解

2026-02-10 10:24:36 272

原创 React Native 鸿蒙跨平台开发:炫酷卡片设计与渐变遮罩实战

本文深入讲解了如何使用 MaskedView、LinearGradient 和 ProgressBar 创建炫酷的卡片设计和渐变遮罩效果。

2026-02-10 10:19:04 248

原创 React Native 鸿蒙跨平台开发:多色渐变进度条与状态可视化系统

在数据可视化应用中,进度条不仅是简单的进度显示工具,更是状态可视化的核心组件。本文将深入讲解如何使用 、 和 创建多色渐变进度条和完整的状态可视化系统。状态数据颜色映射渐变生成进度显示视觉反馈数值状态阶段状态百分比状态单色映射双色渐变多色渐变线性渐变径向渐变分段渐变水平进度条环形进度仪表盘技术深度解析:技术深度解析:技术深度解析:技术深度解析:四、高级应用场景4.1 多维度状态面板4.2 状态历史趋势4.3 告警阈值系统五、总结本文深入讲解了如何使用 LinearGradient

2026-02-10 09:52:03 212

原创 React Native 鸿蒙跨平台开发:渐变进度条与遮罩效果的完美结合

本文深入讲解了如何结合和三个库,创建出具有渐变效果和遮罩特效的进度条组件。

2026-02-10 09:34:50 307

原创 React Native 鸿蒙跨平台开发:@react-native-community-progress-bar-android 进度条代码指南

库名称版本信息1.0.6: 支持 RN 0.72 版本(@react-native-ohos/progress-bar-android)1.1.0: 支持 RN 0.77 版本(@react-native-ohos/progress-bar-android)官方仓库主要功能水平进度条:显示水平方向的标准进度条圆形进度条:显示圆形旋转的加载进度条确定进度:显示具体的进度值(0-100%)不确定进度:显示旋转动画,表示正在处理中。

2026-02-10 09:18:09 366

前端面试题汇总(html/css/js/vue/ts/uniapp/git等)

涉及知识点: 1、优化(seo优化、渐进增强与优雅降级、性能优化) 2、html 常问面试题 3、css 必会面试题 4、JavaScript 必会面试题(初级-高级) 5、vue2-vue3 基础知识以及相关面试题 6、typescript 基础知识 7、uniapp 基础 8、网络相关

2024-04-09

使用Verdaccio实现npm私有化

Verdaccio是sinopia开源框架的一个fork,由于sinopia作者两年前就已经停止更新,坑比较多,因此Verdaccio是目前最好的选择。通过命令行启动的话,如果终端停止了,那我们的服务器也就停止了,因此一般我们通过pm2启动守护进程。是一个 Node.js创建的轻量的私有npm代理注册源(proxy registry)此时如果我们想再次切换到淘宝或者其他的镜像地址,来回切换过于麻烦。这个工具来管理我们的源地址,可以查看和切换地址。

2024-04-17

JavaScript 城市三级联动省市区数据

js城市三级联动省市区数据

2022-10-29

TA创建的收藏夹 TA关注的收藏夹

TA关注的人

提示
确定要删除当前文章?
取消 删除