文章目录

前言

在.NET MAUI应用程序开发中，资源字典和样式是构建一致、可维护和美观用户界面的关键工具。资源字典允许我们集中管理和重用各种资源，如颜色、字体、尺寸和样式，而样式则帮助我们将一组属性应用于多个控件，保持界面的一致性。本文将深入探讨MAUI中的资源字典与样式系统，包括资源的不同级别、字典合并、资源查找机制、多级继承以及样式的定义与应用。通过掌握这些概念，我们可以更有效地组织应用程序的视觉设计，提高代码的可维护性和复用性。

1. 本地资源与应用资源

在.NET MAUI中，资源可以在不同的级别定义和使用，主要分为本地资源（局部资源）和应用资源（全局资源）。理解这些不同级别的资源定义和适用范围，对于有效管理应用程序的资源至关重要。

1.1 资源定义级别

在MAUI中，资源可以在以下几个级别定义：
资源定义级别
应用级资源
页面级资源
布局级资源
控件级资源
1.1.1 控件级资源

控件级资源是在单个控件（如Button、Label等）的Resources属性中定义的资源。这些资源只能被定义它们的控件访问和使用。

<Button Text="示例按钮">
    <Button.Resources>
        <!-- 这里的资源只对此Button可见 -->
        <Color x:Key="ButtonTextColor">DarkBlue</Color>
    </Button.Resources>
</Button>
1.1.2 布局级资源

布局级资源在布局容器（如StackLayout、Grid等）的Resources属性中定义，可以被该布局容器及其所有子元素访问。

<StackLayout>
    <StackLayout.Resources>
        <!-- 这里的资源对StackLayout及其所有子元素可见 -->
        <Color x:Key="TextColor">Navy</Color>
        <Style TargetType="Label">
            <Setter Property="TextColor" Value="{StaticResource TextColor}" />
            <Setter Property="FontSize" Value="18" />
        </Style>
    </StackLayout.Resources>
    
    <Label Text="标题" FontAttributes="Bold" />
    <Label Text="这是内容文本" />
</StackLayout>
1.1.3 页面级资源

页面级资源在ContentPage（或其他页面类型）的Resources属性中定义，可以被整个页面及其所有子元素访问。

<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="MyApp.MainPage">
    <ContentPage.Resources>
        <!-- 这里的资源对整个页面及其所有子元素可见 -->
        <Color x:Key="PageBackgroundColor">AliceBlue</Color>
        <Color x:Key="TextColor">DarkSlateBlue</Color>
        <Style x:Key="TitleLabelStyle" TargetType="Label">
            <Setter Property="FontSize" Value="24" />
            <Setter Property="TextColor" Value="{StaticResource TextColor}" />
            <Setter Property="FontAttributes" Value="Bold" />
            <Setter Property="HorizontalOptions" Value="Center" />
        </Style>
    </ContentPage.Resources>
    
    <StackLayout BackgroundColor="{StaticResource PageBackgroundColor}">
        <Label Text="页面标题" Style="{StaticResource TitleLabelStyle}" />
        <!-- 页面内容 -->
    </StackLayout>
</ContentPage>
1.1.4 应用级资源

应用级资源在应用程序的App.xaml文件中定义，可以被整个应用程序中的所有页面和控件访问。这是定义全局资源的理想位置。

<!-- App.xaml -->
<Application xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="MyApp.App">
    <Application.Resources>
        <!-- 应用级资源，对整个应用可见 -->
        <Color x:Key="PrimaryColor">#512BD4</Color>
        <Color x:Key="SecondaryColor">#DFD8F7</Color>
        <Color x:Key="TextColor">Black</Color>
        
        <Style TargetType="Label">
            <Setter Property="TextColor" Value="{StaticResource TextColor}" />
        </Style>
        
        <Style TargetType="Button">
            <Setter Property="BackgroundColor" Value="{StaticResource PrimaryColor}" />
            <Setter Property="TextColor" Value="White" />
            <Setter Property="CornerRadius" Value="8" />
        </Style>
    </Application.Resources>
</Application>

1.2 资源选择的最佳实践

选择在哪个级别定义资源时，应遵循以下原则：

  1. 全局一致的资源：如品牌颜色、通用样式等，应定义在应用级别
  2. 特定页面的资源：仅在单个页面中使用的资源，应定义在页面级别
  3. 局部资源：只在特定布局或控件中使用的资源，应定义在相应的布局或控件级别
  4. 避免重复：避免在多个级别重复定义相同的资源，除非有意要在某个范围内覆盖全局资源

2. 资源字典合并

.NET MAUI允许我们通过合并资源字典的方式组织和重用资源。这种方法使我们能够将资源模块化，更好地管理大型应用程序中的资源。

2.1 创建独立资源字典

我们可以创建独立的资源字典文件，然后将它们合并到应用程序的主资源字典中。在Visual Studio中，可以使用".NET MAUI ResourceDictionary (XAML)"项模板创建独立的资源字典。

<!-- Colors.xaml -->
<?xml version="1.0" encoding="UTF-8" ?>
<ResourceDictionary 
    xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
    xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml">
    
    <Color x:Key="PrimaryColor">#512BD4</Color>
    <Color x:Key="SecondaryColor">#DFD8F7</Color>
    <Color x:Key="TertiaryColor">#2B0B98</Color>
    <Color x:Key="TextColor">Black</Color>
    <Color x:Key="TextColorDark">White</Color>
    <Color x:Key="BackgroundColor">White</Color>
    <Color x:Key="BackgroundColorDark">#1C1C1E</Color>
</ResourceDictionary>

<!-- Styles.xaml -->
<?xml version="1.0" encoding="UTF-8" ?>
<ResourceDictionary 
    xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
    xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml">
    
    <Style x:Key="DefaultLabelStyle" TargetType="Label">
        <Setter Property="TextColor" Value="{StaticResource TextColor}" />
        <Setter Property="FontSize" Value="16" />
    </Style>
    
    <Style x:Key="HeaderLabelStyle" TargetType="Label">
        <Setter Property="TextColor" Value="{StaticResource PrimaryColor}" />
        <Setter Property="FontSize" Value="24" />
        <Setter Property="FontAttributes" Value="Bold" />
        <Setter Property="HorizontalOptions" Value="Center" />
        <Setter Property="Margin" Value="0,10,0,20" />
    </Style>
    
    <Style x:Key="PrimaryButtonStyle" TargetType="Button">
        <Setter Property="BackgroundColor" Value="{StaticResource PrimaryColor}" />
        <Setter Property="TextColor" Value="White" />
        <Setter Property="CornerRadius" Value="8" />
        <Setter Property="Padding" Value="15,10" />
        <Setter Property="FontAttributes" Value="Bold" />
    </Style>
</ResourceDictionary>

2.2 合并资源字典的方法

2.2.1 使用Source属性合并

最简单的合并资源字典的方法是使用ResourceDictionary的Source属性，这种方法适用于合并本地资源字典：

<ContentPage.Resources>
    <ResourceDictionary>
        <!-- 本地定义的资源 -->
        <Color x:Key="PageSpecificColor">LightBlue</Color>
        
        <!-- 合并外部资源字典 -->
        <ResourceDictionary Source="Resources/Styles/Colors.xaml" />
    </ResourceDictionary>
</ContentPage.Resources>
2.2.2 使用MergedDictionaries属性合并

另一种方法是使用MergedDictionaries集合，这种方法更灵活，可以合并多个资源字典：

<!-- App.xaml -->
<Application xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="MyApp.App">
    <Application.Resources>
        <ResourceDictionary>
            <!-- 本地定义的应用级资源 -->
            <x:Double x:Key="DefaultFontSize">16</x:Double>
            
            <!-- 合并外部资源字典 -->
            <ResourceDictionary.MergedDictionaries>
                <ResourceDictionary Source="Resources/Styles/Colors.xaml" />
                <ResourceDictionary Source="Resources/Styles/Styles.xaml" />
                <ResourceDictionary Source="Resources/Styles/Fonts.xaml" />
            </ResourceDictionary.MergedDictionaries>
        </ResourceDictionary>
    </Application.Resources>
</Application>

2.3 从其他程序集合并资源字典

还可以从外部程序集合并资源字典，这对于共享库或组件非常有用：

<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:lib="clr-namespace:MyLibrary.Resources;assembly=MyLibrary">
    <ContentPage.Resources>
        <ResourceDictionary>
            <ResourceDictionary.MergedDictionaries>
                <lib:SharedResources />
            </ResourceDictionary.MergedDictionaries>
        </ResourceDictionary>
    </ContentPage.Resources>
</ContentPage>

要使上述代码工作，SharedResources必须是定义在外部程序集中的ResourceDictionary派生类，并且必须有一个公共无参构造函数。

2.4 资源字典合并的优势

使用资源字典合并有以下优势：

  1. 模块化：可以将资源按逻辑分组到不同的文件中
  2. 可重用性：可以在不同项目间共享资源字典
  3. 可维护性：便于维护和更新特定类别的资源
  4. 主题支持：可以通过切换合并的资源字典来实现主题切换

3. 资源查找机制

当在XAML中引用资源时（通常通过StaticResource或DynamicResource标记扩展），MAUI会按照特定的查找路径搜索资源。了解这个机制对于解决资源引用问题和优化资源组织非常重要。

3.1 资源查找路径

MAUI在查找资源时会按照以下顺序搜索：
是
否
是
否
是
否
是
否
是
否
开始查找
当前元素
找到资源?
使用找到的资源
父元素
找到资源?
继续向上查找父元素
找到资源?
页面级资源
找到资源?
应用级资源
找到资源?
抛出异常

具体查找顺序为：

  1. 首先在引用资源的元素自身的Resources集合中查找
  2. 如果未找到，则在其父元素的Resources集合中查找
  3. 继续向上遍历视觉树，在每个父元素的Resources中查找
  4. 如果到达页面仍未找到，则在页面的Resources集合中查找
  5. 如果页面中未找到，则在应用程序的Resources集合中查找
  6. 如果仍未找到，则抛出XamlParseException异常

3.2 静态资源与动态资源

MAUI提供了两种引用资源的方式：StaticResource和DynamicResource标记扩展。它们的资源查找路径相同，但工作机制不同：

3.2.1 StaticResource

StaticResource在XAML加载时查找资源并一次性应用，不会响应资源的后续更改。

<Label TextColor="{StaticResource PrimaryColor}" Text="使用静态资源" />
3.2.2 DynamicResource

DynamicResource创建一个到资源字典键的链接，当资源字典中的资源值发生变化时，使用该资源的元素也会更新。

<Label TextColor="{DynamicResource DynamicTextColor}" Text="使用动态资源" />

可以在代码中更新动态资源：

// 更新动态资源
Resources["DynamicTextColor"] = Colors.Red;
3.2.3 比较两者的用法
public partial class ThemePage : ContentPage
{
    public ThemePage()
    {
        InitializeComponent();
    }
    
    private void OnSwitchThemeClicked(object sender, EventArgs e)
    {
        // 只有使用DynamicResource的元素会响应此更改
        if (Application.Current.Resources.TryGetValue("LightThemeTextColor", out var lightColor))
        {
            Application.Current.Resources["DynamicTextColor"] = lightColor;
        }
        else if (Application.Current.Resources.TryGetValue("DarkThemeTextColor", out var darkColor))
        {
            Application.Current.Resources["DynamicTextColor"] = darkColor;
        }
    }
}

3.3 资源冲突解决

当在不同级别定义了相同键的资源时，遵循"就近原则"：

  1. 离使用点最近的资源定义会优先使用
  2. 控件级定义覆盖布局级定义
  3. 布局级定义覆盖页面级定义
  4. 页面级定义覆盖应用级定义
<!-- App.xaml -->
<Application.Resources>
    <Color x:Key="TextColor">Blue</Color>
</Application.Resources>

<!-- MainPage.xaml -->
<ContentPage.Resources>
    <Color x:Key="TextColor">Green</Color>
</ContentPage.Resources>

<!-- 使用的是Green而非Blue -->
<Label TextColor="{StaticResource TextColor}" Text="这是什么颜色？" />

3.4 资源查找的性能考虑

资源查找是有性能开销的，特别是在复杂的视觉树和大型应用程序中。以下是一些性能优化建议：

  1. 将频繁使用的资源定义在靠近使用点的级别
  2. 避免在深层嵌套的视觉树中频繁查找资源
  3. 使用StaticResource而非DynamicResource，除非确实需要动态更新资源
  4. 合理组织资源字典，避免过大的单一字典
  5. 考虑使用代码方式缓存常用资源引用

4. 资源多级继承

MAUI中的资源可以通过不同的方式形成继承关系，使我们能够构建复杂而灵活的资源系统。

4.1 样式继承

样式是最常用的继承机制，通过BasedOn属性，一个样式可以继承另一个样式的所有设置，并添加或覆盖特定属性：

<ResourceDictionary>
    <!-- 基础样式 -->
    <Style x:Key="BaseButtonStyle" TargetType="Button">
        <Setter Property="FontSize" Value="16" />
        <Setter Property="CornerRadius" Value="8" />
        <Setter Property="Padding" Value="15,10" />
    </Style>
    
    <!-- 继承的样式 -->
    <Style x:Key="PrimaryButtonStyle" TargetType="Button" BasedOn="{StaticResource BaseButtonStyle}">
        <Setter Property="BackgroundColor" Value="{StaticResource PrimaryColor}" />
        <Setter Property="TextColor" Value="White" />
    </Style>
    
    <!-- 再次继承 -->
    <Style x:Key="AccentButtonStyle" TargetType="Button" BasedOn="{StaticResource PrimaryButtonStyle}">
        <Setter Property="BackgroundColor" Value="{StaticResource AccentColor}" />
        <Setter Property="FontAttributes" Value="Bold" />
    </Style>
</ResourceDictionary>

4.2 样式继承的限制

样式继承有一些限制需要注意：

  1. 继承样式的TargetType必须与基础样式相同或是其派生类型
  2. 显式样式可以从隐式样式继承，但隐式样式不能从显式样式继承
  3. 样式只能从相同级别或更高级别的样式继承：
    • 应用级样式只能继承应用级样式
    • 页面级样式可以继承应用级或页面级样式
    • 控件级样式可以继承应用级、页面级或同级控件样式

4.3 动态样式继承

对于需要在运行时动态变化的样式，可以使用BaseResourceKey属性代替BasedOn：

<ResourceDictionary>
    <Style x:Key="DynamicBaseStyle" TargetType="Label">
        <Setter Property="FontSize" Value="16" />
        <Setter Property="TextColor" Value="{DynamicResource TextColor}" />
    </Style>
    
    <Style x:Key="DynamicHeaderStyle" TargetType="Label" BaseResourceKey="DynamicBaseStyle">
        <Setter Property="FontSize" Value="24" />
        <Setter Property="FontAttributes" Value="Bold" />
    </Style>
</ResourceDictionary>

// 切换基础样式
Resources["DynamicBaseStyle"] = Resources["AnotherStyle"];
// 使用BaseResourceKey的DynamicHeaderStyle也会相应更新

4.4 资源引用链

资源定义中可以引用其他资源，形成资源引用链：

<ResourceDictionary>
    <!-- 基础颜色 -->
    <Color x:Key="BrandBlue">#1565C0</Color>
    
    <!-- 引用基础颜色的资源 -->
    <Color x:Key="PrimaryColor">{StaticResource BrandBlue}</Color>
    <Color x:Key="NavigationBarColor">{StaticResource BrandBlue}</Color>
    
    <!-- 引用上一级资源的样式 -->
    <Style x:Key="NavLabelStyle" TargetType="Label">
        <Setter Property="TextColor" Value="{StaticResource PrimaryColor}" />
        <Setter Property="FontAttributes" Value="Bold" />
    </Style>
</ResourceDictionary>

在这种情况下，如果BrandBlue颜色更改，所有引用它的资源（如PrimaryColor）也会更新，但仅在使用DynamicResource的情况下。

4.5 多重继承的最佳实践

使用资源多级继承时，应遵循以下最佳实践：

  1. 创建清晰的继承层次，避免过深的继承链
  2. 为基础资源（如品牌颜色）使用描述性名称
  3. 为派生资源使用功能性名称（如PrimaryButtonStyle）而非视觉描述
  4. 在适当的情况下使用DynamicResource和BaseResourceKey以支持运行时主题切换
  5. 避免循环引用，确保资源引用形成有向无环图

5. 样式定义与应用

样式是MAUI中最强大的资源类型之一，它允许我们将一组属性设置打包在一起，并应用于多个控件。熟练掌握样式的定义和应用对于创建统一且可维护的用户界面至关重要。

5.1 样式的基本结构

一个XAML样式定义通常包含目标类型和一系列属性设置：

<Style TargetType="TypeName" x:Key="StyleName">
    <Setter Property="PropertyName1" Value="Value1" />
    <Setter Property="PropertyName2" Value="Value2" />
    <!-- 更多属性设置 -->
</Style>

样式有两种主要类型：

  • 显式样式：带有x:Key，必须显式引用才能应用
  • 隐式样式：不带x:Key，自动应用于指定类型的所有控件

5.2 显式样式

显式样式需要通过Style属性和StaticResource或DynamicResource标记扩展显式引用：

<!-- 定义显式样式 -->
<Style x:Key="SpecialEntryStyle" TargetType="Entry">
    <Setter Property="BackgroundColor" Value="#F0F0F0" />
    <Setter Property="TextColor" Value="{StaticResource PrimaryColor}" />
    <Setter Property="FontSize" Value="16" />
    <Setter Property="Margin" Value="10" />
</Style>

<!-- 应用显式样式 -->
<Entry Text="输入文本" Style="{StaticResource SpecialEntryStyle}" />

5.3 隐式样式

隐式样式自动应用于所有匹配TargetType的控件，无需显式引用：

<!-- 定义隐式样式 -->
<Style TargetType="Button">
    <Setter Property="BackgroundColor" Value="{StaticResource PrimaryColor}" />
    <Setter Property="TextColor" Value="White" />
    <Setter Property="CornerRadius" Value="8" />
    <Setter Property="Padding" Value="15,10" />
</Style>

<!-- 样式自动应用于所有Button -->
<Button Text="按钮1" />
<Button Text="按钮2" />

5.4 样式类

MAUI 6+引入了样式类的概念，允许多个样式应用于同一控件，类似于CSS的类：

<!-- 定义样式类 -->
<Style TargetType="Label" Class="Title">
    <Setter Property="FontSize" Value="24" />
    <Setter Property="FontAttributes" Value="Bold" />
</Style>

<Style TargetType="Label" Class="Center">
    <Setter Property="HorizontalOptions" Value="Center" />
</Style>

<Style TargetType="VisualElement" Class="Accent" ApplyToDerivedTypes="True">
    <Setter Property="BackgroundColor" Value="{StaticResource AccentColor}" />
</Style>

<!-- 应用样式类 -->
<Label Text="样式类示例" StyleClass="Title,Center" />
<Frame StyleClass="Accent" Padding="20">
    <Label Text="强调内容" TextColor="White" />
</Frame>

5.5 针对派生类型的样式

通过设置ApplyToDerivedTypes="True"，样式可以应用于目标类型及其所有派生类型：

<!-- 应用于所有VisualElement及其派生类型 -->
<Style TargetType="VisualElement" ApplyToDerivedTypes="True">
    <Setter Property="VisualStateManager.VisualStateGroups">
        <VisualStateGroupList>
            <VisualStateGroup Name="CommonStates">
                <VisualState Name="Normal" />
                <VisualState Name="Disabled">
                    <VisualState.Setters>
                        <Setter Property="Opacity" Value="0.5" />
                    </VisualState.Setters>
                </VisualState>
            </VisualStateGroup>
        </VisualStateGroupList>
    </Setter>
</Style>

5.6 在代码中定义和应用样式

除了在XAML中定义样式，还可以在C#代码中创建和应用样式：

public partial class MainPage : ContentPage
{
    public MainPage()
    {
        InitializeComponent();
        
        // 创建样式
        var labelStyle = new Style(typeof(Label))
        {
            Setters =
            {
                new Setter { Property = Label.TextColorProperty, Value = Colors.DarkBlue },
                new Setter { Property = Label.FontSizeProperty, Value = 18 },
                new Setter { Property = Label.FontAttributesProperty, Value = FontAttributes.Italic }
            }
        };
        
        // 将样式添加到资源字典
        Resources.Add("CodeLabelStyle", labelStyle);
        
        // 应用样式
        var dynamicLabel = new Label
        {
            Text = "代码创建的样式标签",
            Style = (Style)Resources["CodeLabelStyle"]
        };
        
        // 添加到布局
        mainLayout.Add(dynamicLabel);
    }
}

5.7 动态切换样式

使用DynamicResource可以在运行时动态切换控件的样式：

<Label Text="可切换样式的标签" Style="{DynamicResource CurrentLabelStyle}" />

private void OnToggleStyleClicked(object sender, EventArgs e)
{
    // 切换当前样式
    if (_usingLightStyle)
    {
        Resources["CurrentLabelStyle"] = Resources["DarkLabelStyle"];
        _usingLightStyle = false;
    }
    else
    {
        Resources["CurrentLabelStyle"] = Resources["LightLabelStyle"];
        _usingLightStyle = true;
    }
}

5.8 样式与Visual State Manager

样式可以与VisualStateManager结合使用，定义控件在不同状态下的外观：

<Style x:Key="FancyButton" TargetType="Button">
    <Setter Property="BackgroundColor" Value="{StaticResource PrimaryColor}" />
    <Setter Property="TextColor" Value="White" />
    <Setter Property="CornerRadius" Value="8" />
    <Setter Property="Padding" Value="15,10" />
    <Setter Property="VisualStateManager.VisualStateGroups">
        <VisualStateGroupList>
            <VisualStateGroup Name="CommonStates">
                <VisualState Name="Normal" />
                <VisualState Name="Pressed">
                    <VisualState.Setters>
                        <Setter Property="Scale" Value="0.96" />
                        <Setter Property="BackgroundColor" Value="{StaticResource PrimaryDarkColor}" />
                    </VisualState.Setters>
                </VisualState>
                <VisualState Name="Disabled">
                    <VisualState.Setters>
                        <Setter Property="BackgroundColor" Value="#CCCCCC" />
                        <Setter Property="TextColor" Value="#888888" />
                    </VisualState.Setters>
                </VisualState>
            </VisualStateGroup>
        </VisualStateGroupList>
    </Setter>
</Style>

结语

通过本文的学习，我们深入了解了.NET MAUI中资源字典和样式系统的工作原理和最佳实践。从本地资源与应用资源的区别，到资源字典的合并方式，再到资源查找机制、资源多级继承以及样式的定义与应用，我们已经掌握了创建一致、可维护和美观用户界面所需的关键知识。

资源字典和样式系统是MAUI应用程序设计的重要基础，合理使用这些功能可以大大提高开发效率，减少代码重复，并使应用程序在不同页面和状态下保持一致的视觉风格。尤其是在大型项目或需要支持多主题的应用中，良好的资源组织和样式管理变得尤为重要。

希望这篇文章能够帮助你更好地理解和应用.NET MAUI中的资源字典与样式系统，创建出更加优秀的跨平台应用程序。

相关学习资源

# microsoft # c# # 学习 # xamarin
Logo
开源鸿蒙跨平台开发者社区

开源鸿蒙跨平台开发社区汇聚开发者与厂商，共建“一次开发，多端部署”的开源生态，致力于降低跨端开发门槛，推动万物智联创新。

更多推荐

博文八：Flutter for OpenHarmony 社区便民实战——水电燃气账单查询+线上一键缴费闭环模块

水电燃气缴费是社区居民每月高频刚需民生业务，也是智慧社区便民APP核心留存功能。传统线下营业厅排队缴费、多平台跳转操作、账单对账不透明、逾期突发停供、资金隐私有风险等问题，长期困扰居民与物业运维。本文基于轻量化开发一体化缴费便民模块，无需额外硬件改造，适配全系低配鸿蒙机型，集成户号绑定、实时账单查询、用量可视化分析、欠费预警、原生安全支付、缴费台账归档全闭环能力，适老化极简交互，轻松通过鸿蒙应用市

avatar 开源鸿蒙跨平台开发者社区
cover

【maaath】 Flutter for OpenHarmony 实战：电池优化应用开发指南

avatar 开源鸿蒙跨平台开发者社区

Flutter 跨平台实战：OpenHarmony 健康管理应用 Day5｜全流程数据闭环与健康数据总览页面实现

大家好，本篇是我真实完成Flutter + OpenHarmony 健康管理应用的 Day5 开发笔记，基于 Day1-Day4 已完成的工程基础，继续实现用户信息录入 - 健康数据录入 - 数据总览展示全流程链路，完成多页面逐级数据传递、全表单校验、完整数据可视化展示，全程只用 DevEco Studio 开发，一步不漏、全部写细，新手照着做就能一次成功！

avatar 开源鸿蒙跨平台开发者社区