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('身体'),
)
许可协议

本文采用 署名-非商业性使用-相同方式共享 4.0 国际 许可协议，转载请注明出处。

分享文章

快来参与讨论吧~