Flutter开发中常常会用到的Widget,看看有没有你需要的吧

Flutter组件

MaterialApp

表示一个应用了 Material 界面风格的应用程序,它封装了应用程序实现 Material Design 所需要的一些widget,大多数项目的界面都应该基于 MaterialApp 进行呈现。

1
2
3
4
5
6
7
8
MaterialApp(
// 指定应用程序在任务栏上显示的标题
title: 'Flutter初体验',
// 指定应用程序的主界面
home: Text('aaa'),
// 配置应用程序的主题
theme: ThemeData(primarySwatch: Colors.red),
)

Text

用于在页面上渲染普通文本字符串,常见用法如下:

1
Text('文本内容', style: TextStyle(fontSize: 12))

其中,
参数1:将要渲染的文本内容
参数2:文本内容的样式

Scaffold

该组件是页面结构的脚手架,包含了页面的基本组成单元.

  • appBar【头部导航条区域】
  • body【页面主题内容区域】
  • drawer【侧边栏抽屉区域】
  • bottomNavigationBar【底部tabBar区域】
  • floatingActionButton【右下角浮动按钮区域】
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    Scaffold(
    appBar: AppBar(
    title: Text('页面标题'),
    ),
    body: Center(
    child: Text('主体内容'),
    ),
    floatingActionButton: FloatingActionButton(
    onPressed: () {},
    child: Icon(Icons.add),
    ),
    drawer: Drawer(),
    )

Container

常用的属性:

  • child【子节点】
  • padding【内容距离盒子边界的距离】
    举例:padding: EdgeInsets.all(10)
  • margin 【盒子边界之外的距离】
    举例:margin: EdgeInsets.all(10)
  • decoration【盒子的装饰】
  • alignment【居中方式】
    1
    2
    3
    decoration: BoxDecoration(
    color: Colors.red,
    border: Border(bottom: BorderSide(width: 5, color: Colors.cyan)))

Row/Cloumn

使内部的 children 子元素横向/纵向布局
属性:

  • children【子元素】
  • mainAxisAlignment【横向对其方式】
  • crossAxisAlignment【纵向对其方式】

Expanded

主要用来控制 flex 布局的占位宽度。需要用在 Row 或 Column 子组件内部。

1
2
3
4
5
6
Row(
children: <Widget>[
Expanded(child: Text('主体内容1'), flex: 2,),
Expanded(child: Text('主体内容2'), flex: 1,)
]
)

Chip

img

1
2
3
4
Chip(
label: Text('Chip'),
avatar: Icon(Icons.people),
)

Divider

分割线,无法设置高度

1
2
3
4
5
Divider(
color: Colors.red,
indent: 10,//左侧间距
endIndent: 10,//右侧间距
)

Card

带有圆角、阴影、边框效果的卡片

1
2
3
4
5
Card(
color: Colors.red,
elevation: 10, //阴影
margin: EdgeInsets.all(10),//间隔
)

AlertDialog

弹窗

image-20210405193723804

1
2
3
4
AlertDialog(
title: Text('头部'),
content: Text('身体'),
)