当前位置：首页 > news >正文

Flutter for HarmonyOS 开发指南（二）：Hello World

news 2026/3/26 20:04:50

一：零基础快速入门Dart Flutter开发

这段代码是 Flutter 官方提供的标准“计数器”示例，也是学习 Flutter 的“Hello World”。现对它进行了一些修改（添加了全局主题配置）。

效果：

二：示例代码

main.dart代码如下：

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( colorScheme: ColorScheme.fromSeed(seedColor: Colors.red.shade500), appBarTheme: const AppBarTheme( // 设置背景色（可选） // backgroundColor: Colors.white, // 设置标题文本的全局样式 titleTextStyle: TextStyle( color: Colors.black, // 全局标题颜色 fontSize: 18, // 全局字体大小 fontWeight: FontWeight.bold, ), ), ), home: const MyHomePage(title: '首页'), ); } } class MyHomePage extends StatefulWidget { const MyHomePage({super.key, required this.title}); final String title; @override State<MyHomePage> createState() => _MyHomePageState(); } class _MyHomePageState extends State<MyHomePage> { int _counter = 0; void _incrementCounter() { setState(() { _counter++; }); } @override Widget build(BuildContext context) { return Scaffold( appBar: AppBar( backgroundColor: Theme.of(context).colorScheme.inversePrimary, title: Text(widget.title), ), body: Center( child: Column( mainAxisAlignment: MainAxisAlignment.center, children: <Widget>[ const Text('You have pushed the button this many times:'), Text( '$_counter', style: Theme.of(context).textTheme.headlineMedium, ), ], ), ), floatingActionButton: FloatingActionButton( onPressed: _incrementCounter, tooltip: 'Increment', child: const Icon(Icons.add), ), ); } }

三：代码解读

1. 入口函数 (main)

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

main(): 这是 Dart 程序的入口，一切从这里开始。
runApp(): 这是 Flutter 的核心函数。它接受一个 Widget（在这里是 MyApp），并将其作为根节点挂载到屏幕上。

2. 根组件 (MyApp)

class MyApp extends StatelessWidget { const MyApp({super.key}); @override Widget build(BuildContext context) { return MaterialApp( title: 'Flutter Demo', theme: ThemeData( colorScheme: ColorScheme.fromSeed(seedColor: Colors.red.shade500), appBarTheme: const AppBarTheme( // 设置背景色（可选） // backgroundColor: Colors.white, // 设置标题文本的全局样式 titleTextStyle: TextStyle( color: Colors.black, // 全局标题颜色 fontSize: 18, // 全局字体大小 fontWeight: FontWeight.bold, ), ), ), home: const MyHomePage(title: '首页'), ); } }

StatelessWidget: 表示这个组件是无状态的。也就是说，MyApp 初始化后，它自己的内部状态不会发生改变（它只是配置整个 App 的壳子）。
MaterialApp: 这是 Flutter 提供的一个顶层组件，它封装了 Google Material Design（安卓风格）的设计规范，提供了路由、主题等核心功能。

ThemeData: 定义 App 的外观。
ColorScheme.fromSeed: 这是 Material 3 的新特性。只需要给一个种子颜色（这里是白色），Flutter 会自动生成一套协调的配色方案（主色、副色、背景色等）。
appBarTheme: 这里是设置的全局样式。这意味着，只要在 App 里使用 AppBar 且不单独覆盖样式。

3. 有状态的主页 (MyHomePage)

class MyHomePage extends StatefulWidget { ... }

StatefulWidget: 这里变成了有状态组件。因为这个页面需要记录点击次数（_counter），数字会变化，所以界面需要随之刷新。
title: 这是一个参数，由父组件（MyApp）传递进来，在这里是 "首页"。

4. 状态逻辑与界面 (_MyHomePageState)

这是 MyHomePage 的“伴生”类，所有的逻辑和界面构建都在这里。

变量与逻辑

int _counter = 0; // 状态变量，记录点击次数 void _incrementCounter() { setState(() { _counter++; }); }

setState(() { ... }):这句最重要！在 Flutter 中，单纯改变变量 _counter++ 是不会更新界面的。必须调用 setState 通知 Flutter：“数据变了，请重新运行 build 方法刷新屏幕。”

界面构建 (build)

@override Widget build(BuildContext context) { return Scaffold( ... ); }

caffold: 意为“脚手架”。它实现了 Material Design 的基本页面布局结构，提供了 appBar（顶部导航栏）、body（中间内容）、floatingActionButton（悬浮按钮）等槽位。

这里的代码有一个“冲突”点：

appBar: AppBar( // 这里的设置优先级高于 MyApp 里的全局设置！ backgroundColor: Theme.of(context).colorScheme.inversePrimary, title: Text(widget.title), ),

注意：你在 MyApp 里设置了全局 backgroundColor: Colors.white，但是在这里（MyHomePage），代码显式地设置了 backgroundColor 为 inversePrimary（一种浅紫色）。
- 结果：背景色会是浅紫色（局部覆盖了全局）。
- 标题文字：因为这里没设置 TextStyle，所以它会使用你在 MyApp 定义的蓝色、18号字（全局样式生效）。

页面主体 (body)

body: Center( // 让内容居中 child: Column( // 垂直排列子组件 mainAxisAlignment: MainAxisAlignment.center, // 垂直方向居中 children: <Widget>[ const Text('You have pushed...'), // 固定文本 Text( '$_counter', // 显示计数变量 style: Theme.of(context).textTheme.headlineMedium, // 使用默认的大标题样式 ), ], ), ),

四：学习建议

Widget 是积木：Flutter 也就是在拼积木。Text、Center、Column 都是积木。
Stateless vs Stateful：
- 如果页面只是展示静态内容（如“关于我们”），用 StatelessWidget。
- 如果页面有交互、数据会变（如“计数器”、“登录页”），用 StatefulWidget。
样式优先级：就像 CSS 一样，就近原则。
- MyApp 里的 theme 是全局样式。
- 具体 Widget（如 AppBar）里的属性是局部样式，会覆盖全局样式。

欢迎加入开源鸿蒙跨平台社区 https://openharmonycrossplatform.csdn.net

查看全文

http://www.jsqmd.com/news/285794/