Flutter 基础知识（一）

一、Flutter 基础

1. Flutter 是什么？它的优点有哪些？

答：

Flutter 是 Google 开源的 UI 框架，可用于构建 iOS、Android、Web、Windows、Mac、Linux 应用。

优点：

• 跨平台开发：一套代码可运行在多个平台。

• 高性能：使用 Skia 引擎，接近原生性能。

• 热重载（Hot Reload） ：提高开发效率。

• 丰富的 UI 组件：支持 Material 和 Cupertino 组件。

• 自绘 UI：不依赖原生控件，UI 渲染一致性强。

2. Flutter 的核心架构是什么？

答：

Flutter 主要由以下层组成：

• Dart Framework（框架层） ：包含 Widget、Animation、Material/Cupertino 组件等。

• Engine（引擎层） ：C++ 编写，包含 Skia 渲染引擎、Dart 运行时等。

• Embedder（嵌入层） ：针对不同平台的适配，如 Android（JNI）、iOS（Objective-C/Swift）。

3. StatefulWidget 和 StatelessWidget 的区别？

区别	StatefulWidget	StatelessWidget
状态	有可变状态（State）	无状态
适用场景	需要动态更新 UI（如表单、动画）	UI 固定，数据不会变化
例子	计数器（Counter）、动画控件	静态文本、图标等

示例代码

scala 复制代码

// StatelessWidget 示例
class MyStatelessWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Text("我是无状态组件");
  }
}

// StatefulWidget 示例
class MyStatefulWidget extends StatefulWidget {
  @override
  _MyStatefulWidgetState createState() => _MyStatefulWidgetState();
}

class _MyStatefulWidgetState extends State<MyStatefulWidget> {
  int count = 0;

  @override
  Widget build(BuildContext context) {
    return Column(
      children: [
        Text("计数: $count"),
        ElevatedButton(
          onPressed: () {
            setState(() {
              count++;
            });
          },
          child: Text("增加计数"),
        ),
      ],
    );
  }
}

4. setState() 的作用是什么？

答：

setState() 用于通知 Flutter 框架，当前组件的状态发生了变化，需要重新构建 UI。

示例：

ini 复制代码

setState(() {
  count++;
});

注意：

• 只能在 State 类中使用。

• 尽量减少 setState 的作用范围，以提高性能。

5. Flutter 的生命周期有哪些？

答：

StatefulWidget 的生命周期：

createState() → 创建 State 实例。
initState() → 组件初始化，仅执行一次。
didChangeDependencies() → 依赖变化时触发（如 InheritedWidget）。
build() → 重新构建 UI。
didUpdateWidget() → 当父组件重建时调用。
deactivate() → 组件被移除时调用。
dispose() → 组件销毁，释放资源（如 Controller）。

示例

scss 复制代码

@override
void initState() {
  super.initState();
  print("组件初始化");
}

@override
void dispose() {
  print("组件销毁");
  super.dispose();
}

6. Flutter 如何实现页面跳转（导航）？

答：

使用 Navigator.push() 和 Navigator.pop() 进行页面管理。

示例

scss 复制代码

// 跳转页面
Navigator.push(
  context,
  MaterialPageRoute(builder: (context) => SecondPage()),
);

// 返回上一个页面
Navigator.pop(context);

命名路由

javascript 复制代码

// 定义路由
void main() {
  runApp(MaterialApp(
    initialRoute: '/',
    routes: {
      '/': (context) => HomePage(),
      '/second': (context) => SecondPage(),
    },
  ));
}

// 跳转
Navigator.pushNamed(context, '/second');

7. Flutter 中 Future 和 async/await 的作用？

答：

• Future 代表 异步操作（如网络请求、文件 IO）。

• async/await 用于 等待异步任务完成，避免回调地狱。

示例

csharp 复制代码

Future<String> fetchData() async {
  await Future.delayed(Duration(seconds: 2));
  return "数据加载完成";
}

void load() async {
  String result = await fetchData();
  print(result);
}

8. Flutter 如何与 Native 交互？

答：

• MethodChannel：用于 Dart 与 Native 通信。

• EventChannel ：适用于 Native 向 Flutter 发送数据流。

• BasicMessageChannel：双向通信（传输字符串、JSON）。

示例（Android 调用 Flutter 方法）

ini 复制代码

const MethodChannel _channel = MethodChannel('com.example.channel');

Future<String> getNativeData() async {
  final String result = await _channel.invokeMethod('getData');
  return result;
}

Android 端（Kotlin）

kotlin 复制代码

class MainActivity : FlutterActivity() {
    private val channel = "com.example.channel"

    override fun configureFlutterEngine(flutterEngine: FlutterEngine) {
        super.configureFlutterEngine(flutterEngine)
        MethodChannel(flutterEngine.dartExecutor.binaryMessenger, channel)
            .setMethodCallHandler { call, result ->
                if (call.method == "getData") {
                    result.success("来自 Android 的数据")
                }
            }
    }
}

三、Flutter 性能优化

9. Flutter 性能优化方法？

答：

避免 setState 过度使用

• 仅更新需要刷新的部分，使用 ValueNotifier 或 Provider 代替 setState。

使用 const 优化

• 避免不必要的 widget 重新构建。

arduino 复制代码

const Text("我是静态文本");

使用 ListView.builder

• 避免一次性渲染大量 ListTile。

使用 RepaintBoundary

• 限制局部重绘区域，提高渲染性能。

10. Flutter 状态管理方式有哪些？

答：

• Provider（推荐）：官方支持，轻量级。

• Riverpod：Provider 的升级版，无需 BuildContext。

• GetX：语法简洁，集成路由管理。

• Bloc/Cubit：适用于大型项目，状态流管理。

Provider 示例

scala 复制代码

class Counter with ChangeNotifier {
  int _count = 0;
  int get count => _count;

  void increment() {
    _count++;
    notifyListeners();
  }
}

// 使用 Provider
Consumer<Counter>(
  builder: (context, counter, child) {
    return Text('计数: ${counter.count}');
  },
);