这篇写一下flutter页面具备的内容。本文最后附源码，需要的小伙伴可以看哦
***代码都在一个dart文件里面写的，按照图片敲就好***
第一步：引入文件，写入口方法
MyApp是我自定义的一个 Widget（组件），入口函数也可以用箭头函数的写法，
void main() => runApp(MyApp()); [写成箭头函数的样子]
第二步： 使用MaterialApp
了解：
1. MaterialApp
MaterialApp一般作为顶层 widget 使用，里面可以定义title（标题）、home(主页)、theme（主题）、routes（路由）等等...
2.weight
无状态的weight页面是静态的，不会改变；有状态的weight，页面数据是可以改变的。
例如flutter里面自带的计数器，它就是有状态的weight。
ps：如果上面MyApp改名了，这里的也要改成一样的；HomePage也是一个自定义的weight
第三步：使用 Scaffold
了解：
Scaffold 主要可以设置：
appBar - 显示在界面顶部的一个 AppBar。
body - 当前界面所显示的主要内容 Widget。
drawer - 抽屉菜单控件。
————————————————————————————————————————
ps:因为第三步没有把内容抽离成一个组件，所以显得很臃肿。一起截图不全就分成了两部分。希望不要介意哈。
解释：
1.像MyApp、HomePage都是组件，后面加小括号是调用的意思；所以调用的组件名和组件的名字要一样哦。如果只是调用了，还没有组件报错是正常的哦，不用担心。如果写全组件还会报错就看一下名字、格式是否正确。
2.在Scaffold组件中：
Appbar是头部导航（title是标题）
body是中间内容（除去头、底部导航栏）
bottomNavigationBar是底部导航（ TextButton.icon是带有小图标的文字按钮）
3.底部导航栏我还不知道应该怎么居中
————————————————————————————————————————
全部代码：
import 'package:flutter/material.dart'; // 导入Material UI组件
void main() { //入口函数
runApp(MyApp());
}
class MyApp extends StatelessWidget {
//输入stss，按下Tab键可以直接生成无状态的weight
const MyApp({Key? key}) : super(key: key);
@override
Widget build(BuildContext context) {
return MaterialApp(
title: "第一个demo",
home: HomePage(), //记得加在HomePage后加小括号哦
);
}
}
class HomePage extends StatelessWidget {//名为HomePage的weight
const HomePage({Key? key}) : super(key: key);
@override
Widget build(BuildContext context) {
return Scaffold( //这里返回Scaffold组件
appBar: AppBar(//定义了Appbar顶部导航
title: Text("demo"),
),
body: Container(//body中间部分
child: Text('hello'),
),
bottomNavigationBar:
Row( //底部导航
children: [
TextButton.icon(
onPressed: () {}, icon: Icon(Icons.home), label: Text('Home')),
TextButton.icon(
onPressed: () {}, icon: Icon(Icons.mail), label: Text('Mail')),
TextButton.icon(
onPressed: () {}, icon: Icon(Icons.account_circle),label: Text('account')),
],
),
);
}
}
// ignore_for_file: prefer_const_constructors
