Flutter 入门
Flutter全部写在项目的lib目录下:
这里贴一个自动创建的计数器的官方的代码,分析学习一下
import 'package:flutter/material.dart';
void main() {
runApp(const MyApp());
}
class MyApp extends StatelessWidget {
const MyApp({Key? key}) : super(key: key);
// 这个widget是程序的根widget,必须使用MaterialApp
@override
Widget build(BuildContext context) {
//MaterialApp 是Material库中提供的Flutter APP框架,通过它可以设置应用的名称、主题、语言、首页及路由列表等。
return MaterialApp(
title: 'Flutter Demo',
theme: ThemeData(
// 这里设置应用的主题
//
// 当你运行你的程序时,你可以看到程序有一个蓝色的toolbar,flutter有一个特性,热重载。
// 比如当你设置主题颜色为Green,你可以不用关闭程序,使用热重载,你就会发现程序主题变为
// 了绿色,而且页面中的数字没有归0,这说明程序没有被重新启动
primarySwatch: Colors.blue,
),
home: const MyHomePage(title: 'Flutter Demo Home Page'),
debugShowCheckedModeBanner: false, //可以关闭右上角的debug标签
);
}
}
class MyHomePage extends StatefulWidget {
const MyHomePage({Key? key, required this.title}) : super(key: key);
// 这个部件是应用程序的主页。它是有状态的,这意味着它有一个 State 对象(定义如下)
// ,其中包含影响其外观的字段。
// 这个类是状态的配置。 它保存由父级(在本例中为 App 小部件)提供并由 State 的 build
// 方法使用的值(在本例中为标题)。 Widget 子类中的字段始终标记为“final”。
final String title;
@override
State<MyHomePage> createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
int _counter = 0;
void _incrementCounter() {
setState(() {
// 这个对 setState 的调用告诉 Flutter 框架在这个 State 中发生了一些变化,这导致它
// 重新运行下面的构建方法以便显示可以反映更新的值。 如果我们在不调用 setState()
// 的情况下更改 _counter,则不会再次调用 build 方法,因此页面上的数据就不会更新。
_counter++;
});
}
@override
Widget build(BuildContext context) {
// 每次调用 setState 时都会重新运行此方法,例如上面的 _incrementCounter 方法。
// Flutter 框架已经过优化,可以快速重新运行构建方法,这样您就可以重新构建任何需要
// 更新的东西,而不必单独更改widget的实例。
// Scaffold 是 Material库中提供的一个widget, 它提供了默认的导航栏、标题和
// 包含主屏幕widget树的body属性。页面需要用Scaffold包裹
return Scaffold(
appBar: AppBar(
// 在这里,我们从 App.build 方法创建的 MyHomePage 对象中获取值,
// 并使用它来设置我们的应用栏标题。
title: Text(widget.title),
),
body: Center(
// Center 是一个layout widget. 它需要一个child,并且把它放置在parent的中间
child: Column(
// Column 也是一个layout widget。 它需要一个孩子的列表并将它们垂直排列。
// 默认情况下,它调整自己的大小,来和子级在水平上大小相等,并会尝试与父级一样高。
// 调用“调试绘画”(在控制台中按“p”,从 Android Studio 的 Flutter Inspector
// 中选择“Toggle Debug Paint”操作,或在 Visual Studio Code