二、Flutter(UI)-组件初识

文档1
文档2

一、页面框架组件

1、Scaffold

• 一个完整的路由页可能会包含导航栏、抽屉菜单(Drawer)以及底部Tab导航菜单等

2、AppBar

• 一个导航栏骨架

3、BottomNavigationBar

• 底部导航栏

二、常用基础组件

1、Text

用于显示简单样式文本

Text(
  "Text",
  maxLines: 1, 
  overflow: TextOverflow.ellipsis,
  style: TextStyle(
    fontSize: 12, color: Color(0xFF333333), fontWeight: FontWeight.bold),
  textAlign: TextAlign.center,
)

2、 按钮

2、1 RaisedButton 即"漂浮"按钮，它默认带有阴影和灰色背景。按下后，阴影会变大

2、2 FlatButton 即扁平按钮，默认背景透明并不带阴影。按下后，会有背景色

2、3 OutlineButton 默认有一个边框，不带阴影且背景透明。按下后，边框颜色会变亮、同时出现背景和阴影(较弱)

2、4 IconButton 是一个可点击的Icon，不包括文字，默认没有背景，点击后会出现背景

3、输入框、表单

TextField: 用于文本输入
Form + FormField

4、图片

Image
Icon

三、常用容器组件

1、Padding 可以给其子节点添加填充（留白），和边距效果类似

2、Container

3、Clip

四、常用滚动容器组件

1、SingleChildScrollView

2、ListView

3、GridView

4、CustomScrollView