在上一篇文章的基础上，本文主要介绍 Flutter 最核心的两大组件特性 —— 无状态组件（StatelessWidget）和有状态组件（StatefulWidget），结合鸿蒙跨端开发场景，从概念理解、代码实现到鸿蒙端运行，具体介绍这两类组件的使用场景和核心差异。

一、核心概念：无状态、有状态组件

无状态和有状态，二者的核心差异在于 “是否能动态更新 UI”，这也是跨端开发中适配鸿蒙界面交互的关键。

无状态组件与有状态组件对比表

特性	无状态组件（StatelessWidget）	有状态组件（StatefulWidget）
核心特点	一旦创建，UI 不可变	UI 可随内部状态（State）动态更新
适用场景	静态展示类界面（文本、图标）	交互类界面（计数器、表单、列表）
鸿蒙跨端适配重点	布局适配、样式统一	状态管理、跨端交互逻辑兼容
生命周期	简单（仅初始化和构建）	完整（创建、更新、销毁等）

二、实战 1：无状态组件开发与鸿蒙适配

无状态组件是跨端开发中最基础、使用最广的组件，适合展示固定内容（如鸿蒙 APP 的标题栏、静态卡片）。

2.1 核心特点

• 无内部状态（State），数据通过构造函数传入且不可变（建议用 final 修饰）；
• 仅重写 build 方法，每次构建都是 “一次性” 的，无状态更新逻辑；
• 鸿蒙端运行时，渲染性能极高，适合静态布局。

2.2 代码实现

在项目main.dart文件中编写如下代码：

import 'package:flutter/material.dart';

// ignore: unused_import
import 'components/01_抽离组件.dart';
// ignore: unused_import
import 'components/02_无状态组件.dart';

//程序入口
void main() {
  runApp(MaterialApp(
    home: MyApp2(age:18),
    // home: MyApp2(age:18),
    // home: MyApp3(),
    // home: MyApp4(parentName: '张三',)
  )); // MaterialApp
}

在项目的 components/02_无状态组件.dart 文件中编写如下代码：

提供两种样式，二选一即可，这里以及实战2我都用了样式二。

样式一

// ignore_for_file: must_be_immutable
 
import 'package:flutter/material.dart';
 
//快捷键：stless
class MyApp2 extends StatelessWidget {
  MyApp2({super.key, this.age});
 
  int? age;
  final String name = '帅哥';
 
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      //导航条
      appBar: AppBar(
        title: const Text('无状态组件',
            style: TextStyle(color: Colors.white, fontSize: 18)),
        backgroundColor: Colors.pink,
        centerTitle: true,
      ),
      //body一般放Container()
      body: Center(
        child: Text('我叫$name,今年$age岁', style: TextStyle(fontSize: 30)),
      ),
      //floatingActionButton：浮动按钮
      floatingActionButton: FloatingActionButton(
        onPressed: () {
          age = age! + 1;
          print('今年$age岁');
        },
        child: const Icon(Icons.add),
      ),
    );
  }
}

样式二

import 'package:flutter/material.dart';

// 无状态组件：鸿蒙APP的静态用户卡片
class MyApp2 extends StatelessWidget {
  // 接收外部传入的参数（鸿蒙端调用时可传值）
  final int age;
  final String name;

  // 构造函数：参数必传 + 可选参数默认值，适配鸿蒙端传参习惯
  const MyApp2({
    super.key,
    required this.age, // 必传参数
    this.name = "鸿蒙用户", // 可选参数，默认值
  });

  @override
  Widget build(BuildContext context) {
    // 鸿蒙端原生渲染的容器 + 样式
    return Scaffold(
      backgroundColor: Colors.white, // 适配鸿蒙浅色模式
      body: Center(
        child: Container(
          width: 300, // 适配鸿蒙手机屏幕宽度
          height: 150,
          decoration: BoxDecoration(
            border: Border.all(color: Color(0xFF007DFF), width: 2), // 鸿蒙系统蓝
            borderRadius: BorderRadius.circular(12), // 鸿蒙原生圆角样式
          ),
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: [
              Text(
                "姓名：$name",
                style: TextStyle(fontSize: 18, color: Colors.black87),
              ),
              SizedBox(height: 10),
              Text(
                "年龄：$age",
                style: TextStyle(fontSize: 18, color: Color(0xFF007DFF)),
              ),
            ],
          ),
        ),
      ),
    );
  }
}

运行鸿蒙项目后，会在鸿蒙模拟器上看到一个带鸿蒙系统蓝边框的静态卡片，证明无状态组件跨端适配成功。

三、实战 2：有状态组件开发与鸿蒙适配

有状态组件是跨端交互的核心，适合实现 “点击更新 UI”“数据实时刷新” 等场景（如鸿蒙 APP 的计数器、表单提交）。

3.1 核心特点

• 包含 Widget 和 State 两部分：Widget 是配置类，State 存储可变状态；
• 通过 setState() 方法更新状态，触发 UI 重建；
• 鸿蒙端需注意：状态更新不会影响跨端性能，Flutter 会自动优化渲染。

3.2 代码实现

在 components/03_有状态组件.dart 文件中编写鸿蒙适配的计数器组件：

样式一

import 'package:flutter/material.dart';
 
//有状态组件：stful 命名遵循大驼峰命名法
class MyApp3 extends StatefulWidget {
  const MyApp3({super.key});
 
  @override
  State<MyApp3> createState() => _MyApp3State();
}
 
//以下划线 _ 开头的类名、变量名或方法名，表示它是“库私有”的。
class _MyApp3State extends State<MyApp3> {
  //状态变量（数据变化，视图会更新）
  String name = '张三';
  int age = 20;
 
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      //导航条
      appBar: AppBar(
        title: const Text('无状态组件',
            style: TextStyle(color: Colors.white, fontSize: 18)),
        backgroundColor: Colors.pink,
        centerTitle: true,
      ),
      //body一般放Container()
      body: Center(
        child: Text('我叫$name,今年$age岁', style: TextStyle(fontSize: 30)),
      ),
      //floatingActionButton：浮动按钮
      floatingActionButton: FloatingActionButton(
        onPressed: () {
        
               age = age + 1;
          print('今年$age岁');
        },
        child: const Icon(Icons.add),
      ),
    );
  }
}

样式二

import 'package:flutter/material.dart';

// 有状态组件：鸿蒙APP计数器（跨端交互核心示例）
class MyApp3 extends StatefulWidget {
  const MyApp3({super.key});

  // 创建State：状态与组件分离，适配跨端生命周期
  @override
  State<MyApp3> createState() => _MyApp3State();
}

// 状态类：存储可变数据，处理交互逻辑
class _MyApp3State extends State<MyApp3> {
  int _counter = 0; // 计数器状态（鸿蒙端可持久化，此处简化）

  // 点击事件：更新状态，触发UI重建
  void _incrementCounter() {
    setState(() {
      _counter++;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text("鸿蒙计数器（有状态组件）"),
        backgroundColor: Color(0xFF007DFF), // 鸿蒙主题色
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            const Text(
              "鸿蒙端点击次数：",
              style: TextStyle(fontSize: 18),
            ),
            Text(
              '$_counter',
              style: Theme.of(context).textTheme.headlineMedium!.copyWith(
                    color: Color(0xFF007DFF), // 鸿蒙系统蓝
                  ),
            ),
          ],
        ),
      ),
      // 鸿蒙风格的悬浮按钮（适配鸿蒙原生交互）
      floatingActionButton: FloatingActionButton(
        onPressed: _incrementCounter,
        backgroundColor: Color(0xFF007DFF),
        child: const Icon(Icons.add),
      ),
    );
  }
}

运行后，在鸿蒙设备上点击悬浮按钮，数字会实时增加，证明有状态组件的交互逻辑在鸿蒙端完全生效。

四、总结

1. 核心差异：无状态组件用于静态展示，有状态组件用于动态交互，二者是 Flutter 跨端开发的基础；
2. 实战要点：无状态组件传参用 final，有状态组件通过 setState() 更新 UI，是跨端交互的核心逻辑。
3. 鸿蒙适配：无需修改组件类型，只需按 Flutter 规范编写，结合鸿蒙设计风格调整样式即可；
4. 静态展示场景优先使用无状态组件，聚焦鸿蒙样式适配与布局复用，最大化渲染性能；

最后，欢迎大家加入开源鸿蒙跨平台社区：
https://openharmonycrossplatform.csdn.net