本文记录 Flutter 开发框架应用方法。

flutter 项目说明

创建一个新的flutter项目

1

flutter create first_app

• dart文件在lib文件夹中，lib是存放dart和flutter代码的文件夹：

• 各个平台的文件夹仅包含平台特定的文件，通常情况下不用更改，flutter在需要时自动更改和配置这些文件。

• build 文件夹只包含 flutter 为不同目标平台构建应用时生成的临时文件和输出文件

• test 文件夹可以编写测试主应用程序代码的代码，可以定义自动化测试，对于早期捕获错误以及确保不必手动测试所有内容非常有用。

• 以 . 开始的文件夹，保存了一些额外的配置

• .gitignore 是 git 使用的文件，版本控制软件，可以用来管理代码快照。

• .metadate 由flutter自动管理，用于跟踪有关项目的一些内部信息和元数据。

• analysis_options.yaml 配置了一些flutter和dart工具，代码编辑器使用这些工具在运行应用程序之前显示代码中的警告和错误。默认设置足够了，也可以根据喜好调整这些设置，例如：强制执行某种编写代码的风格，如果不小心使用了另外一种风格或类似的东西会警告。

• pubspec.yaml 可以编辑，可以添加第三方软件包到 flutter 项目。你想为你的应用程序添加一些功能，而不想自己构建，因为太麻烦或者复杂，但它也没有内置在flutter或dart中，就可以引入一个第三方软件包。

• README.md 文件中包含了一些关于这个项目的一般信息，简短的描述和一些资源，可以访问这些资源深入了解 flutter

工作原理

像dart这样的代码不会被andriod或iOS设备理解，在编译之前，dart最终会从上到下遍历这个代码文件，并从上到下读取代码文件，解析这个代码文件。

1
2
3

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

代码和代码文件由dart解析，构建项目以便在目标平台上运行。

代码被解析之后，他必须被翻译成目标平台可以理解的语言，这些代码不能在andriod或iOS或其他目标平台上执行。

下一步，在解析代码之后，代码被各种dart和flutter工具编译，意味着他被转换成一些其他代码，一些原生ios或andriod机器代码，因此，这些代码可以被ios或andriod或任何目标平台所理解。

因此，使用dart和flutter编写的代码将被转换成其他代码，然后这些代码最终被打包，捆绑在一起成为一个高度优化的代码包，然后，该代码包再将项目交付到的设备上执行。

函数理解

main函数是dart中的一个特殊函数。这也是为什么上面这些奇怪的指令会自动添加到代码编辑器中，因为main函数是dart应用程序的主要入口点。

准确的说，是main.dart文件中的主函数，当应用程序在设备上激活时，

它将由dart自动执行，因此，在代码被解析和编译之后，当它在设备上执行时，main函数的编译版本会通过dart在该设备上自动执行，

因此不需要手动调用main,在main函数中，调用runapp函数，因为只是激活flutter app或启动flutter app并在屏幕上绘制一些用户界面的另一个重要步骤，因为runapp会告诉flutter在屏幕上显示什么。

布局

• https://flutter.wendang.dev/ui/layout/

Flutter 布局机制的核心是 Widget。 在 Flutter 中，几乎所有东西都是 Widget——甚至布局模型也是 Widget。你在 Flutter 应用中看到的图像、图标和文本都是 Widget。 但你看不到的东西也是 Widget，例如排列、约束和对齐可见 Widget 的行、列和网格。

通过组合 Widget 来构建更复杂的 Widget，从而创建布局。

例如，下面的第一个屏幕截图显示了 3 个图标，每个图标下面都有一个标签

下图显示了可视化布局，显示了 3 列的行，其中每一列包含一个图标和一个标签。：

此 UI 的 Widget 树的图表：

大部分内容看起来都符合预期，但您可能想知道容器（以粉色显示）。Container 是一个 Widget 类，允许您自定义其子 Widget。当您想要添加填充、边距、边框或背景颜色时，可以使用 Container，这只是它的一些功能。

在此示例中，每个 Text Widget 都放置在一个 Container 中以添加边距。整个 Row 也放置在一个 Container 中以在行周围添加填充。

此示例中的其余 UI 由属性控制。使用其 color 属性设置 Icon 的颜色。使用 Text.style 属性设置字体、颜色、粗细等等。列和行具有允许您指定其子项如何垂直或水平对齐以及子项应占用多少空间的属性。

布局 Widget

在 Flutter 中，只需几个步骤即可将文本、图标或图像放置在屏幕上.

1. 选择布局 Widget

根据您希望如何对齐或约束可见 Widget 来选择各种布局 Widget，因为这些特性通常会传递给包含的 Widget。

此示例使用 Center，它将其内容水平和垂直居中。

2. 创建可见 Widget

例如，创建一个 Text Widget：

1

Text('Hello World'),

创建一个 Image Widget：

1
2
3
4

return Image.asset(
  image,
  fit: BoxFit.cover,
);

创建一个 Icon Widget：

1
2
3
4

Icon(
  Icons.star,
  color: Colors.red[500],
),

content_copy

3. 将可见 Widget 添加到布局 Widget

所有布局 Widget 都有以下任一属性：

• 如果它们只接受一个子 Widget，则为 child 属性——例如，Center 或 Container
• 如果它们接受 Widget 列表，则为 children 属性——例如，Row、Column、ListView 或 Stack。

将 Text Widget 添加到 Center Widget：

1
2
3

const Center(
  child: Text('Hello World'),
),

4. 将布局 Widget 添加到页面

Flutter 应用本身就是一个 Widget，大多数 Widget 都有一个 build() 方法。在应用的 build() 方法中实例化并返回一个 Widget 会显示该 Widget。

Material 应用

对于 Material 应用，您可以使用 Scaffold Widget；它提供默认横幅、背景颜色，并具有用于添加抽屉、Snack bar 和底部表单的 API。然后，您可以将 Center Widget 直接添加到主页的 body 属性中。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

class MyApp extends StatelessWidget {
  const MyApp({super.key});
  @override
  Widget build(BuildContext context) {
    const String appTitle = 'Flutter layout demo';
    return MaterialApp(
      title: appTitle,
      home: Scaffold(
        appBar: AppBar(
          title: const Text(appTitle),
        ),
        body: const Center(
          child: Text('Hello World'),
        ),
      ),
    );
  }
}

Cupertino 应用

要创建 Cupertino 应用，请使用 CupertinoApp 和 CupertinoPageScaffold Widget。

与 Material 不同，它不提供默认横幅或背景颜色。您需要自己设置这些。

• 要设置默认颜色，请将已配置的 CupertinoThemeData 传递到应用的 theme 属性。
• 要在应用顶部添加 iOS 风格的导航栏，请将 CupertinoNavigationBar Widget 添加到脚手架的 navigationBar 属性。 您可以使用 CupertinoColors 提供的颜色来配置 Widget 以匹配 iOS 设计。
• 要布局应用的主体，请使用所需的 Widget 作为其值设置脚手架的 child 属性，例如 Center 或 Column。

要了解您可以添加哪些其他 UI 组件，请查看Cupertino 库。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28

class MyApp extends StatelessWidget {
  const MyApp({super.key});
  @override
  Widget build(BuildContext context) {
    return const CupertinoApp(
      title: 'Flutter layout demo',
      theme: CupertinoThemeData(
        brightness: Brightness.light,
        primaryColor: CupertinoColors.systemBlue,
      ),
      home: CupertinoPageScaffold(
        navigationBar: CupertinoNavigationBar(
          backgroundColor: CupertinoColors.systemGrey,
          middle: Text('Flutter layout demo'),
        ),
        child: Center(
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: <Widget>[
              Text('Hello World'),
            ],
          ),
        ),
      ),
    );
  }
}

非 Material 应用

对于非 Material 应用，您可以将 Container Widget 添加到应用的 build() 方法中：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

class MyApp extends StatelessWidget {
  const MyApp({super.key});
  @override
  Widget build(BuildContext context) {
    return Container(
      decoration: const BoxDecoration(color: Colors.white),
      child: const Center(
        child: Text(
          'Hello World',
          textDirection: TextDirection.ltr,
          style: TextStyle(
            fontSize: 32,
            color: Colors.black87,
          ),
        ),
      ),
    );
  }
}

content_copy

默认情况下，非 Material 应用不包含 AppBar、标题或背景颜色。如果您想要在非 Material 应用中使用这些功能，则必须自己构建它们。此应用将背景颜色更改为白色，并将文本更改为深灰色以模仿 Material 应用。

就是这样！运行应用时，您应该会看到 Hello World。

垂直和水平布局多个 Widget

最常见的布局模式之一是垂直或水平排列 Widget。您可以使用 Row Widget 水平排列 Widget，使用 Column Widget 垂直排列 Widget。

• Row 和 Column 是两个最常用的布局模式。
• Row 和 Column 都接受子 Widget 列表。
• 子 Widget 本身可以是 Row、Column 或其他复杂 Widget。
• 您可以指定 Row 或 Column 如何垂直和水平对齐其子项。
• 您可以拉伸或约束特定的子 Widget。
• 您可以指定子 Widget 如何使用 Row 或 Column 的可用空间。

要在 Flutter 中创建行或列，您可以将子 Widget 列表添加到 Row 或 Column Widget 中。反过来，每个子项本身可以是行或列，依此类推。以下示例显示了如何在行或列内嵌套行或列。

此布局组织为一个 Row。该行包含两个子项：左侧是一个列，右侧是一个图像：

参考资料

• https://blog.csdn.net/weixin_44692732/article/details/149914020
• https://flutter.wendang.dev/

文章链接：
https://www.zywvvd.com/notes/coding/flutter/tutorial/