12 Flutter 页面
Flutter 中除了布局的 Widget，还有交互显示的 Widget 和完整页面呈现的Widget，其中常见的有 MaterialApp、Scaffold、Appbar、Text、Image、FlatButton等，下面简单介绍这些 Wdiget，并完成一个页面。
类型 | 作用特点 |
|---|---|
MaterialApp | 一般作为APP顶层的主页入口，可配置主题，多语言，路由等 |
Scaffold | 一般用户页面的承载Widget，包含appbar、snackbar、drawer等material design的设定。 |
Appbar | 一般用于Scaffold的appbar ，内有标题，二级页面返回按键等，当然不止这些，tabbar等也会需要它 。 |
Text | 显示文本，几乎都会用到，主要是通过style设置TextStyle来设置字体样式等。 |
RichText | 富文本，通过设置 |
TextField | 文本输入框 ： |
Image | 图片加载: |
FlatButton | 按键点击: |
那么再次直插主题实现一个简单完整的页面试试。如下方代码：
- 首先我们创建一个StatefulWidget：
DemoPage。 - 然后在
_DemoPageState中，通过build创建了一个Scaffold。 - Scaffold内包含了一个
AppBar和一个ListView。 - AppBar类似标题了区域，其中设置了
title为 Text Widget。 - body是
ListView,返回了20个之前我们创建过的 DemoItem Widget。
import 'package:flutter/material.dart';
import 'package:gsy_github_app_flutter/test/DemoItem.dart';
class DemoPage extends StatefulWidget {
@override
_DemoPageState createState() => _DemoPageState();
}
class _DemoPageState extends State<DemoPage> {
@override
Widget build(BuildContext context) {
///一个页面的开始
///如果是新页面，会自带返回按键
return new Scaffold(
///背景样式
backgroundColor: Colors.blue,
///标题栏，当然不仅仅是标题栏
appBar: new AppBar(
///这个title是一个Widget
title: new Text("Title"),
),
///正式的页面开始
///一个ListView，20个Item
body: new ListView.builder(
itemBuilder: (context, index) {
return new DemoItem();
},
itemCount: 20,
),
);
}
}最后我们创建一个StatelessWidget作为入口文件，实现一个MaterialApp将上方的DemoPage设置为home页面，通过main入口执行页面。
import 'package:flutter/material.dart';
import 'package:gsy_github_app_flutter/test/DemoPage.dart';
void main() {
runApp(new DemoApp());
}
class DemoApp extends StatelessWidget {
DemoApp({Key key}) : super(key: key);
@override
Widget build(BuildContext context) {
return new MaterialApp(home: DemoPage());
}
}好吧，第一部分终于完了，这里主要讲解都是一些简单基础的东西，适合安利入坑，后续更多实战等你开启
学员评价