本人在flutter上写了几个小项目，短暂学习了下swiftui课程,由于使用flutter跨平台支持鸿蒙，因此也学了点ArkTS，暂时没有上线项目，基于这几者的相似性，本人作下UI层面的使用比较展示

首先，三者都属于声明式UI，使用具有很大的相似行，比较起来能更好的入手，三者相互影响

声明式UI 是什么？

声明式UI是一种构建用户界面的方法,它更关注描述UI应该呈现的状态，而不是具体操作步骤

特征

• 声明式描述
  • 开发者仅需描述UI的预期结果，如布局结构、样式和交互逻辑，具体实现由框架自动完成‌
  • 代码与UI呈现一一对应
• ‌状态驱动视图更新
  • 过状态（如@State变量）控制UI内容，状态变化自动触发界面刷新，无需手动操作DOM或视图元素
  • 支持最小化更新，仅重新渲染受状态变化影响的组件，提升性能‌

实现技术

• 组件化与配置
  • 开发者仅需描述UI的预期结果，如布局结构、样式和交互逻辑，具体实现由框架自动完成‌
  • 代码与UI呈现一一对应
• ‌状态管理机制
  • 过状态（如@State变量）控制UI内容，状态变化自动触发界面刷新，无需手动操作DOM或视图元素
  • 支持最小化更新，仅重新渲染受状态变化影响的组件，提升性能‌
  • ‌跨平台与分布式支持

三个框架示例

框架/ 技术	特点
ArkTS‌	HarmonyOS官方语言，通过装饰器和链式语法实现声明式UI，支持多设备适配‌
Flutter‌	基于Widget树的声明式设计，强调状态管理与UI分离，适用于高性能跨平台应用‌
SwiftUI‌	苹果生态的声明式框架，通过@State和@Binding实现数据驱动视图‌

三个框架示例的组件使用案例

1 .Text

swiftui

Text("SwiftUI Text 全属性示例")
  .font(.title)  // 字体类型‌
  .fontWeight(.heavy)  // 字体粗细‌
  .foregroundColor(.purple)  // 字体颜色‌
.underline(true, color: .orange)  // 下划线‌
  .italic()  // 斜体‌
  .multilineTextAlignment(.center)  // 多行对齐‌
  .lineSpacing(8)  // 行间距‌
  .kerning(3)  // 字符间距‌
  .padding(12)  // 内边距‌
  .background(Color.yellow.opacity(0.3))  // 背景色‌
  .cornerRadius(10)  // 圆角‌
.frame(maxWidth: .infinity)

flutter

  "Flutter Text 全属性示例",
  style: TextStyle(
    color: Colors.purple,
    fontSize: 24,
    fontWeight: FontWeight.bold,
    backgroundColor: Colors.yellow,
    decoration: TextDecoration.underline,
    decorationColor: Colors.red,
  ),
  textAlign: TextAlign.center,
  maxLines: 2,
  overflow: TextOverflow.ellipsis,
  textScaleFactor: 1.2,
  locale: Locale('zh', 'CN'),
) ‌:ml-citation{ref="1,2" data="citationList"}

鸿蒙arkUI

Text("ArkUI Text 全属性示例")
.fontColor(Color.Purple)
  .fontSize(24)
  .fontWeight(FontWeight.Bold)
  .textAlign(TextAlign.Center)
  .maxLines(2)
  .textOverflow(TextOverflow.Ellipsis)
  .backgroundColor(Color.Yellow)
  .margin({ top: 10, bottom: 10 })
  .width('100%')

2 . Row,Column

只展示横向布局，纵向布局相同使用

swiftui HStack VStack

HStack(alignment: .center, spacing: 12) {
    Image(systemName: "star.fill")
        .foregroundColor(.yellow)
    Text("收藏项")
        .font(.headline)
}
.padding(.horizontal, 16)
.frame(height: 50)
.background(Color.white)
.cornerRadius(8)
.shadow(radius: 2)
.onTapGesture { toggleSelection() } 

flutter

Row(
  children: [
    Container(width: 50, height: 50, color: Colors.red),
    Container(width: 50, height: 50, color: Colors.blue),
  ],
  mainAxisAlignment: MainAxisAlignment.spaceEvenly,
  crossAxisAlignment: CrossAxisAlignment.center,
  mainAxisSize: MainAxisSize.max,
  textDirection: TextDirection.ltr,
  verticalDirection: VerticalDirection.down,
)

鸿蒙arkUI

Row({ space: 10 }) {
  Text('Left').fontSize(16).backgroundColor(Color.Red)
  Text('Center').fontSize(16).weight(1).textAlign(TextAlign.Center)
  Text('Right').fontSize(16).backgroundColor(Color.Blue)
}
.width('100%')
.height(100)
.alignItems(VerticalAlign.Center)
.justifyContent(FlexAlign.SpaceBetween)
.border({ width: 1, color: Color.Black })

3 . 输入框

swiftui

@State private var username = ""
TextField("用户名", text: $username)
                .textFieldStyle(.roundedBorder)
                .padding()
                .disableAutocorrection(true)

flutter

_controller = TextEditingController();
TextField(
  controller: _controller,
  decoration: InputDecoration(
    hintText: '请输入用户名',
    prefixIcon: Icon(Icons.person),
    border: OutlineInputBorder(),
  ),
  obscureText: false,
  keyboardType: TextInputType.emailAddress,
  onChanged: (value) => print(value),
)
)

鸿蒙arkUI

@State username: string = ''
 TextInput({ placeholder: '用户名', text: this.username })
                .width('80%')
                .height(50)
                .border({ width: 1, color: Color.Gray })
                .onChange((value: string) => {
                    this.username = value
                })

4 . Button

swiftui

Button(action: {
    // 按钮点击时执行的代码
    print("按钮被点击了")
}) {
    // 按钮的内容，通常是一个文本
    Text("点击我")
}
.buttonStyle(.bordered) // 设置按钮的样式

flutter

ElevatedButton(
  onPressed: () {
    // 按钮点击时执行的代码
    print('按钮被点击了');
  },
  child: Text('点击我'),
)

InkWell(
            child: Container()
            onTap:(){
              print('按钮被点击了');
            }
            )

鸿蒙arkUI

Button('点击我')
        .onClick(() => {
          // 按钮点击时执行的代码
          console.log('按钮被点击了');
        })
        .width(200)
        .height(50)
        .backgroundColor(Color.Blue)
        .textColor(Color.White)

5 . Image

swiftui

Image("example").resizable().scaledToFill().aspectRatio(contentMode: .fill)

flutter

Image.asset('assets/images/example.png')
或者
Image.network('https://example.com/image.png')

鸿蒙arkUI

Image('/assets/example.png') // 图片放在 ets/assets 文件夹里

Image($r("app.media.example")) // 图片放在 resources/base/media 文件夹里

Image('https://example.com/image.png').width().height().margin()

2024 年 Flutter 未来相关的 roadmap 中，规划 IDE Widget 预览支持，这个方向上，swiftui和ArkTS 走在了前面，
代码可读性方面，flutter
也在与swiftUI /ArkUI 靠拢，未来 Flutter、SwiftUI 还是 ArkUI ，会越来越趋于一致