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(
// 这里设置应用的主题
//
// 当你运行你的程序时,你可以看到程序有一个蓝色的toolbarflutter有一个特性,热重载。
// 比如当你设置主题颜色为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 中选择
// “Toggle Debug Paint”命令)以查看每个widget的线框 . Column 具有各种属性来
// 控制它如何调整自身大小以及如何定位其子项。 这里我们使用 mainAxisAlignment
// 垂直居中child; 这里的主轴是垂直轴,因为列是垂直的(横轴是水平的)。
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
const Text(
'You have pushed the button this many times:',
),
Text(
'$_counter',
style: Theme.of(context).textTheme.headline4,
),
],
),
),
floatingActionButton: FloatingActionButton(
onPressed: _incrementCounter,
tooltip: 'Increment',
child: const Icon(Icons.add),
), // This trailing comma makes auto-formatting nicer for build methods.
);
}
}
 

 

注意点

一、flutter右上角的debug标签

 

 

 可以看到右上角有一个debug,这时候可以在materialApp下设置debugShowCheckedModeBanner

 

return MaterialApp(
      ......
      debugShowCheckedModeBanner: false, //可以关闭右上角的debug标签
);

 

二、flutter中的界面配置

flutter的根widget必须返回materialApp,它必须是flutter的入口。

其次其余的widget需要用Scaffold包裹。

三、Widget

flutter入门,必须了解的就是widget了,要用widget才能实现UI。

widget又分为有状态的widget和无状态的widget。

大体理解,可以认为有无状态的widget有下列不同

有状态的widget(stateful widget),其中的数据是动态绑定的,例如当数据绑定的是变量时,当变量的值发生改变,页面上的数据显示也会随之变化。

无状态的widget(stateless widget),其中的数据是死的。如primarySwatch: Colors.blue,

 

但实际上,还有更flutter的解释是:

Stateful widget可以拥有状态,这些状态在widget生命周期中是可以变的,而Stateless widget不能有状态,因此是不可变的。

stateful widget至少由两个类组成:StatefulWidget类和State类。

statefulstate类本身是不变的。但是state持有的状态在widget的生命周期中看会发生变化。

 

此外,还需要注意的是,widget实际上是一种树状结构,其根节点(即flutter入口,必须是MaterialApp

然后每一个单独的路由,首个widget必须用scaffold包裹。

 

四、热重载

flutter的热重载功能能够试程序在不用重新启动的情况下,快速地将我们对于程序的修改,体现在运行中的程序。它是通过将更新后的源代码文件注入正在运行的Dart虚拟机中来实现。

Android studio:热重载在屏幕右上方。

 

 IntelliJ IDE:可以选择Save All,或者单击工具栏上方的Hot Reload按钮

 

 命令行 cmd:如果是在命令行使用flutter run运行,则在窗口输入r即可。

 

posted @ 2021-12-20 18:01  潋澜  阅读(738)  评论(0编辑  收藏  举报