Flutter之build 方法详解

原创

于 2024-10-25 22:20:25 发布 · 1.2k 阅读

17 ·

CC 4.0 BY-SA版权

文章标签：

#前端 #开发语言

前言

我们创建一个Flutter程序，入口文件内容如下

//导包，此行代码作用是导入了 Material UI 组件库。Material (opens new window)是一种标准的移动端和 web 端的视觉设计语言， Flutter默认提供了一套丰富的 Material 风格的 UI 组件。
import 'package:flutter/material.dart';

//应用入口
void main() {
  runApp(const MyApp());
}

/// 在 Flutter 中，大多数东西都是 widget（后同“组件”或“部件”），包括对齐(alignment)、填充(padding)和布局(layout)等，它们都是以 widget 的形式提供。
class MyApp extends StatelessWidget {
  const MyApp({super.key});
  @override

  ///Flutter 在构建页面时，会调用组件的build方法，widget 的主要工作是提供一个 build()方法来描述如何构建 UI 界面（通常是通过组合、拼装其它基础 widget）。
  Widget build(BuildContext context) {
    ///MaterialApp 是 Material 库中提供的 Flutter APP 框架，通过它可以设置应用的名称、主题、语言、首页及路由列表等。MaterialApp也是一个 widget。
    return MaterialApp(
      //用于名称
      title: 'Flutter Demo',
      //主题
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      //home 为 Flutter 应用的首页，它也是一个 widget。
      home: const MyHomePage(title: 'Flutter Demo  Page'),
    );
  }
}

//首页 它继承自S