Flutter学习之Hello World

最新推荐文章于 2024-05-05 22:55:01 发布

实习期小潘

最新推荐文章于 2024-05-05 22:55:01 发布

阅读量1.1k

点赞数 4

分类专栏： Flutter 文章标签： flutter 学习

本文链接：https://blog.youkuaiyun.com/m0_60264901/article/details/125167231

版权

这篇博客是Flutter学习的起点，从Dart语言基础到Flutter框架的初步接触。作者介绍了三个案例：默认的Hello World，显示Hello World的页面，以及如何布局多个盒子。每个案例都配合代码解析，帮助读者理解Flutter的基本用法和组件使用。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

对于学习Flutter，我先是学习了Dart语言，然后再学习Flutter框架。

今天就跟着我的学习步骤来进行学习吧！

任何的学习都是从Hello World开始！

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

/*
*与C/C++、Java类似，Flutter 应用中main函数为应用程序的入口，main函数中调用了，runApp 方法，
* 它的功能是启动Flutter应用，它接受一个Widget参数，在本示例中它是MyApp类的一个实例，该参数代表Flutter应用。
* main函数使用了(=>)符号，这是Dart中单行函数或方法的简写。
* */
void main() => runApp(MyApp());
/*
* MyApp类代表Flutter应用，它继承了 StatelessWidget类，这也就意味着应用本身也是一个widget。
* 在Flutter中，大多数东西都是widget，包括对齐(alignment)、填充(padding)和布局(layout)。
* Flutter在构建页面时，会调用组件的build方法，widget的主要工作是提供一个build()方法来描述
* 如何构建UI界面（通常是通过组合、拼装其它基础widget）。
* MaterialApp 是Material库中提供的Flutter APP框架，通过它可以设置应用的名称、主题、语言、首页及路由列表等。
* MaterialApp也是一个widget。
* home 为Flutter应用的首页，它也是一个widget。
*
* */

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(title: 'Flutter Demo Home Page Yeah!'),
    );
  }
}

/*
* MyHomePage 是应用的首页，它继承自StatefulWidget类，表示它是一个有状态的widget（Stateful widget）。
* 现在，我们可以简单认为Statefulwidget 和Statelesswidget有两点不同：
* 1、Stateful widget可以拥有状态，这些状态在widget生命周期中是可以变的，而Stateless widget是不可变的。
* 2、Stateful widget至少由两个类组成：
* （1）一个StatefulWidget类。
* （2）一个 State类； StatefulWidget类本身是不变的，但是 State类中持有的状态在widget生命周期中可能会发生变化。
* _MyHomePageState类是MyHomePage