Flutter - UIKit开发相关指南 - 概览

环境

Flutter 3.29
macOS Sequoia 15.4.1
Xcode 16.3

概览

UIView与Widgets的比较

在UIKit使用UIView类的对象进行页面开发,布局也是UIView类的对象,在Flutter中使用的是Widget,在概念上Widget可以理解成UIView。

差异：

1. 有效期: Widgets是不可变的,它的生存期只到被改变前。当Widgets或它们的状态改变了。Flutter’s 框架会创建一个widget的实例，而UIKit中的UIView是不会重新创建，它是可变的,绘制一次并且在使用setNeedDisplay()使其失效之前不会重新绘制
2. 轻量: Widgets相对更轻量,一个原因是它们是不可变，而且它们不负责显示和绘制,更多的是一种语义的描述。

Flutter 包含 Matterial 组件库,其中的Widgets都符合了Material设计指引。Material设计是个适配多平台的设计系统,也支持iOS

但如果想用iOS的UI风格,可以使用Cupertino widgets libray

更新Widgets

使用UIKit开发时可以直接改变对应的视图。就像上面提到的,因为Flutter的Widgets是不可变的，可以通过更新Widget的状态来更新Widget。

这就是有状态 widget 与无状态 widget 的概念。StatelessWidget是没有附加状态的 widget。

当需要实现HTTP请求获取数据后根据数据动态改变的UI,可以使用StatefulWidget。

无状态和有状态 widget 之间的重要区别在于，StatefulWidgets 有一个 State 对象，用于存储状态数据并在树重建中传递数据，因此它不会丢失。

Text Widget是常见的无状态的Widget

class Text extends StatelessWidget {
   
   
  const Text(
    String this.data, {
   
   
    ...

Text(
  'I like Flutter!',
  style: TextStyle(fontWeight: FontWeight.bold),
);

初始化时并没有传递状态,要实现动态的修改Text Widget的内容,可以通过包装到一个StatefulWidget中

import 'package:flutter/material.dart';

void main() {
   
   
  // 1. 创建MainApp Widget
  runApp(MainApp());
}

class MainApp extends StatelessWidget {
   
   
  const MainApp({
   
   super.key});

  @override
  Widget build(BuildContext context) {
   
   
    // 2.调用
    return MaterialApp(title: 'Sample App', home: CustomStatefulPage());

  }
}

class _CustomStatefulePageState extends State<CustomStatefulPage> {
   
   
  String text = 'I Like Flutter';
  // 5.点击按钮触发_updateText
  void _updateText() {
   
   
    // 6.通知Flutter更新
    setState(() {
   
   
      text = "Flutter is Awesome!";
    });
  }
  @override
  // 7.调用build方法,刷新页面
  // 4.调用build方法,按钮点击方法绑定_updateText方法
  Widget build(BuildContext context) {
   
   
    return Scaffold(
      appBar: AppBar(title: const Text('Sample App')),
      body: Center(child: Text(text)),
      floatingActionButton: FloatingActionButton(
        onPressed: _updateText,
        tooltip: 'Update Text',
        child: const Icon(Icons.update),
      ),
    );
  }
}

class CustomStatefulPage extends StatefulWidget {
   
   
  const CustomStatefulPage({
   
   super.key});
  @override
  // 3.创建_CustomStatefulePageState对象
  State<StatefulWidget> createState() => _CustomStatefulePageState();
}

Widget 布局

在UIKit中可以使用Storyboard和用代码去更新View的约束。在Flutter中,通过组合Widget树来展示布局。

@override
Widget build(BuildContext context) {
   
   
  return Scaffold(
    appBar: AppBar(title: const Text('Sample App')),
    body: Center(
      child: CupertinoButton(
        onPressed: () {
   
   },
        // 指定内边距
        padding: const EdgeInsets.only(left: 10, right: 10),
        child: const Text('Hello'),
      ),
    ),
  );
}

移除Widget

在UIKit中使用addSubview()或removeFromSuperview()来动态的添加或移除视图。在Flutter中Widget是不可变，没有那种类似addSubview()的方法。可以在父Widget传一个函数,然后控制显示的效果

import 'package:flutter/material.dart';
import 'package:flutter/cupertino.dart'