筑基期

1. 什么是 Flutter？它的主要特点是什么？

Flutter 是由 Google 开发的开源移动应用开发框架，允许开发者使用一套代码同时构建 iOS、Android、Web 和桌面端应用。它基于 Dart 语言，具有高性能的渲染引擎和丰富的组件库。

Flutter` 的主要特点

• 跨平台开发：一次编写，多个平台运行，包括移动端和桌面端。

• 高性能：Flutter 使用自绘引擎 Skia，能够在每秒 60 帧甚至 120 帧的情况下流畅运行。

• 丰富的 Widget 库：提供了丰富的内置 UI 组件，可以高度自定义用户界面。

• 热重载：在开发过程中能够即时预览代码修改，极大提升了开发效率。

• 开放源代码：Flutter 是开源项目，拥有活跃的开发者社区。

2. 什么是 Dart？为什么 Flutter 使用 Dart 语言？

Dart 是由 Google 开发的一种编程语言，主要用于构建跨平台应用，Flutter 正是基于 Dart 语言开发的。

Flutter 使用 Dart 的原因：

• 高性能：Dart 可以直接编译为原生代码，提升了应用的性能。

• 即时编译和提前编译：Dart 支持即时编译（JIT）和提前编译（AOT），实现快速开发与高效的运行性能。

• 简洁语法：Dart 的语法接近 Java 和 JavaScript，易于学习和使用。

• 单线程模型：Dart 的 async 和 await 提供了简洁的异步处理机制，适合 UI 相关的高响应性需求。

3. 如何在 Flutter 中创建一个简单的应用程序？Flutter 项目的基本结构是什么？

要创建一个 Flutter 应用程序，首先需要安装 Flutter SDK，然后通过 flutter create 命令创建新项目。

创建项目的命令

flutter create my_flutter_app

项目结构

• lib/ 文件夹：存放应用的核心代码，主要的入口文件是 lib/main.dart。

• android/ 和 ios/ 文件夹：分别存放 Android 和 iOS 的平台特定代码。

• pubspec.yaml 文件：管理项目的依赖包、资源等。

示例：创建一个简单的 Flutter 应用：

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: Text('Hello Flutter')),
        body: Center(child: Text('Welcome to Flutter!')),
      ),
    );
  }
}

main() 函数是应用的入口，runApp() 方法启动应用。MaterialApp 是 Flutter 提供的一个应用容器，Scaffold 用于构建基本的页面结构。

4. 什么是 Widget？Flutter 中有哪两种类型的 Widget？

在 Flutter 中，Widget 是应用的基本构建块，几乎所有的可视化元素和布局都由 Widget 构成。每个 Widget 都是不可变的，Flutter 通过组合 Widget 来构建复杂的 UI。

Flutter 中的两种类型的 Widget

• StatelessWidget：表示静态的、不可变的 Widget，它的状态一旦创建就不会改变。常用于显示静态内容。

  示例：

   class MyStatelessWidget extends StatelessWidget {
     @override
     Widget build(BuildContext context) {
       return Text('I am a StatelessWidget');
     }
   }
  

• StatefulWidget：表示动态的、可以改变状态的 Widget，它的状态在生命周期内可以发生变化。

  示例：

   class MyStatefulWidget extends StatefulWidget {
     @override
     _MyStatefulWidgetState createState() => _MyStatefulWidgetState();
   }
  
   class _MyStatefulWidgetState extends State<MyStatefulWidget> {
     @override
     Widget build(BuildContext context) {
       return Text('I am a StatefulWidget');
     }
   }
  

StatelessWidget 适合静态内容，StatefulWidget 适合需要交互或动态变化的内容。

5. 如何在 Flutter 中创建布局？常用的布局 Widgets 有哪些？

在 Flutter 中，可以使用多种 Widget 来创建复杂的布局，布局是通过嵌套 Widget 树的方式实现的。

• Column：用于垂直排列子 Widget。

   Column(
     children: <Widget>[
       Text('First item'),
       Text('Second item'),
     ],
   )
  

• Row：用于水平排列子 Widget。

   Row(
     children: <Widget>[
       Icon(Icons.star),
       Text('Star Icon'),
     ],
   )
  

• Container：用于包裹其他 Widget，可以设置 padding、margin、border 和 background。

   Container(
     padding: EdgeInsets.all(10),
     color: Colors.blue,
     child: Text('I am inside a Container'),
   )
  

• Stack：允许子 Widget 叠加显示。

   Stack(
     children: <Widget>[
       Positioned(
         top: 50,
         left: 50,
         child: Text('Stacked Text'),
       ),
     ],
   )
  

• ListView：用于显示垂直滚动的列表。

   ListView(
     children: <Widget>[
       Text('Item 1'),
       Text('Item 2'),
       Text('Item 3'),
     ],
   )
  

通过这些布局 Widget 可以轻松构建复杂的界面，Column 和 Row 用于基本的水平和垂直排列，而 Stack 则允许元素重叠。

6. 如何在 Flutter 中处理用户输入？常用的输入控件有哪些？

Flutter 提供了多种控件用于处理用户输入，常见的输入控件有按钮、文本输入框和选择控件。

• TextField：用于输入文本的控件。

   TextField(
     decoration: InputDecoration(
       labelText: 'Enter your name',
     ),
     onChanged: (text) {
       print('Text changed to: $text');
     },
   )
  

• RaisedButton：用于点击操作的按钮。

   RaisedButton(
     onPressed: () {
       print('Button clicked');
     },
     child: Text('Click Me'),
   )
  

• Checkbox：用于选择项的复选框。

   Checkbox(
     value: true,
     onChanged: (bool newValue) {
       print('Checkbox state: $newValue');
     },
   )
  

• Radio：用于单选选项的单选按钮。

   Radio(
     value: 1,
     groupValue: selectedValue,
     onChanged: (int value) {
       setState(() {
         selectedValue = value;
       });
     },
   )
  

通过 TextField 处理文本输入，RaisedButton 处理点击事件，而 Checkbox 和 Radio 分别用于复选和单选。

7. Flutter 中的 setState 方法是什么？它在状态管理中起到什么作用？

setState() 是 Flutter 中用于更新 StatefulWidget 状态的方法。

当 setState() 被调用时，Flutter 会重新执行 build() 方法，从而更新 UI。

setState() 的作用

• 它标记 StatefulWidget 发生了改变，告诉 Flutter 框架需要重新构建 Widget 树的部分。

• 只有在 StatefulWidget 中才能使用 setState()，它是状态管理的重要组成部分。

class CounterWidget extends StatefulWidget {
  @override
  _CounterWidgetState createState() => _CounterWidgetState();
}

class _CounterWidgetState extends State<CounterWidget> {
  int _counter = 0;

  void _incrementCounter() {
    setState(() {
      _counter++;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Column(
      children: <Widget>[
        Text('Counter: $_counter'),
        RaisedButton(
          onPressed: _incrementCounter,
          child: Text('Increment'),
        ),
      ],
    );
  }
}

在点击按钮时调用 setState()，会触发 CounterWidget 重新构建，并更新显示的计数值。