前言:
在学习Flutter的时候牢记一句话,即是“万物皆组件”,一个Text也是组件。
一.MaterialApp 组件 (一般作为顶级widget)
MaterialApp 是一个方便的 Widget,它封装了应用程序实现 Material Design 所需要的 一些 Widget,一般作为顶层 widget 使用。
常用的属性:
home(主页) -----------------------------设置主页样式
title(标题) -----------------------------设置标题
color(颜色)
theme(主题)
routes(路由) -----------------------------设置跳转
...
二.Scaffold组件
Scaffold 是 Material Design 布局结构的基本实现。此类提供了用于显示 drawer、snackbar 和底部 sheet 的 API。
常用的属性:
appBar ----------------------------------- 显示在界面顶部的一个 AppBar
body -------------------------------------- 当前界面所显示的主要内容 Widget
drawer ------------------------------------ 抽屉菜单控件
...
如:
import 'package:flutter/material.dart'; void main() { runApp(MyApp()); } class MyApp extends StatelessWidget { @override Widget build(BuildContext context) { return MaterialApp( title: "Flutter Demo", home: Scaffold( appBar: AppBar( title: Text('This is a demo'), elevation: 15.0, ), //设置标题阴影 body: MyHome(), ), theme: ThemeData( //设置主题颜色 primarySwatch: Colors.yellow), ); } } class MyHome extends StatelessWidget { @override Widget build(BuildContext context) { return Center( child: Text( "I am a demo", style: TextStyle( fontSize: 15, fontWeight: FontWeight.bold, color: Colors.black), ), ); } }
效果: