flutter入门与实战教程( 四 )

布局控件可以与本机开发中的布局相比较。通常，它有一个子属性，用于接收控件数组并为这些控件进行特定布局。
常用的布局控件有行、列、堆栈、伸缩等。
基本控制
文本(" 666 ")
基本控件是常用的控件，如文字、按钮和图片。
常用的基本控件有文本、文本字段、按钮、图像等。
功能控制
(上下文)的导航器。push(materialpageroute(builder:(context){
returnnewpage；
}));
flutter中还有一种控件，不影响ui布局，但是有一些特定的功能，比如页面跳转、事件监控、主题定义等等。我们称这种控制为功能控制。
常用的功能控件包括导航器、通知侦听器、主题等。
计数器
开始写flutter代码。请记住，flutter项目创建后，它带来了一个反演示。现在我们使用自己的代码再次实现它。代码修改如下：
import" package: flutter/material. dart"；
voidmain=runapp(myapp)；
类myapp扩展了statelesswidget{
@覆盖
小部件构建(buildcontext上下文){
returnmaterialapp(home: mypage)；
}
}
类mypage扩展了statefulwidget{
@覆盖
stateflewidgetcreatestate{
返回mypagestate；
}
}
类mypagestate扩展了statemypage{
intnum=0；
@覆盖
小部件构建(buildcontext上下文){
返回脚手架(
appbar: appbar(
标题：文本("计数器")，
),
body: center(
儿童：文本(
num.tostring，
样式：文本样式(字体大小： 36)
)
),
浮动动作按钮：浮动动作按钮(
儿童：图标，
onpressed:{
setstate( {
num
});
}));
}
}
运行后，可以看到这个界面：
每次按钮，数字就会增加一。让我们分析一下这段代码，看看其中使用的一些小部件。
statefulwidget
因为页面中的数字会随着状态的变化而变化，所以页面使用statefulwidget来代替。statefulwidget不直接返回widget，而是返回state，然后返回状态中的widget 。
脚手架
脚手架是一个标准的材料设计页面，包括标题栏、浮动按钮、侧滑菜单、底部导航栏等的配置。我们在这里使用标题栏、页面内容主体和浮动按钮浮动动作按钮。
导航栏
appbar是标题栏。通过查看控件的构造方法，我们可以知道它的可配置属性。
appbar的可选参数包括标题、
您还可以配置标题前面的内容引导、右侧的操作按钮和图标、控制垂直高度提升等。我们只传递了标题，所有其他属性都使用默认值。
中心
center是一个容器类控件，其功能是在中心显示其子控件。
浮动动作按钮
熟悉android开发的人应该都很熟悉这个控件，它是一个在页面右下角有特定样式的button 。参数中的onpressed是必选项，后要传递一个回调函数。
根据这个例子，颤振有两个重要的特征。
响应式 ui
单击按钮后，我们将num变量增加一，并使用设置状态来通知状态已经更改。旋舞会根据新的状态更新ui 。如果你接触过小程序的开发，setstate类似于小程序的setdata 。
在flutter中，我们不需要使用set方法来更新ui 。可变控件绑定到状态，这是flutter的响应用户界面编程。
热重载
androidq和ios13中，增加了黑暗模式，所以我们来玩一个黑暗主题。materialapp中有一个主题属性。让我们用：配置它
退货材料app(
theme: themedata.dark，
home: mypage
);
复制代码
在这种变化之后，我们不想run.我们可以看到，通过闪电图标flutterhotreload，界面已经改变了：
这是flutter的热重载.修改代码后，通过热重装，可以在设备上立即看到修改结果，可以大大提高开发效率。