简介

Card “卡片”

• 卡片用于表示一些相关信息，例如相册，地理位置，用餐，联系方式等

基本用法

此示例显示了创建卡片窗口组件，其中显示了相册信息和两个操作

实例演示

import 'package:flutter/material.dart';

/*
* Checkbox 默认Card的实例
* */
class CardFullDefault extends StatefulWidget {
  const CardFullDefault() : super();

  @override
  State<StatefulWidget> creat...

阅读全文...

简介

SnackBarAction 来实现并行界面的横向滑动展示

• TabBar，是材料设计中很常用的一种横向标签. 来实现并行界面的横向滑动展示，在Flutter的世界中，TabBar有着相同的作用。通常，我们会在AppBar的底部部分结合TabBarView来使用TabBar;

基本用法

在容器顶部或者底部配置, TabBar组件, 横向切换视口窗口中的内容

TabBar 有以下几项属性

• tabs 一般使用Tab对象,当然也可以是其他的Widget
• controller TabController对象
• isScrollable 是否可滚动
• indicatorColor 指示器颜色...

阅读全文...

简介

SnackBarAction “屏幕底部消息右侧可操作的行为”

• 带有可选操作的轻量级消息，短暂显示在屏幕底部, 并提供按钮交互。

基本用法

为SnackBar加入action SnackBarAction显示按区, 默认下是隐藏的

实例演示

import 'package:flutter/material.dart';

class SnackBarActionDemo extends StatefulWidget {
  _Demo createState() => _Demo();
}

class _Demo extends State<Sna...

阅读全文...

简介

SliverAppBar “应用栏”

• 它类似于Android中的toolbar;

基本用法

虽然基本相同，构造方法也是非常的简单，但是却不能直接使用它，由官方文档可以看到通常结合 ScrollView 来使用它;

• AppBar 和 SliverAppBar 都是继承StatefulWidget 类，都代表 Toobar;
• 二者的区别在于 AppBar 位置的固定的应用最上面的;而 SliverAppBar 是可以跟随内容滚动的;
• 下面的示例,放在 NestedScrollView 实现上提到顶的悬停;

实例演示

import 'package:flutter/mat...

阅读全文...

简介

SnackBar “屏幕底部消息”

• 带有可选操作的轻量级消息，短暂显示在屏幕底部
• SnackBar是用户操作后，显示提示信息的一个控件，类似Toast，会自动隐藏;

基本用法

Scaffold.of(context).showSnackBar()，传递描述消息的 SnackBar 实例;

• 要控制SnackBar保持可见的时间，请指定持续时间。

实例演示

import 'package:flutter/material.dart';

/*
* SnackBar 默认的实例,无状态
* */
class SnackBarLessDefault extends ...

阅读全文...

简介

ButtonBar “末端对齐的按钮容器”

• 横排的Button布局

基本用法

根据当前 ButtonTheme 中的填充水平放置 button

• 子 button 在布置行与 MainAxisAlignment.end;
• 当 Directionality为TextDirection.ltr 时，按钮栏的子项右对齐，最后一个子项成为最右边的子项;
• 当 Directionality TextDirection.rtl 时，子项被左对齐，最后一个子项成为最左边的子项;

实例演示

import 'package:flutter/material.dart';

/*
...

阅读全文...

简介

FlexibleSpaceBar “扩展和折叠的应用栏”

• AppBar 的一部分，可以扩展和折叠;

基本用法

最常用于 SliverAppBar.flexibleSpace 字段

• 灵活的空格键随着应用滚动而扩展和收缩，以便 AppBar 从应用程序的顶部到达应用程序滚动内容的顶部;
• 要调整 AppBar 大小,必须将其包装在 FlexibleSpaceBar.createSettings 返回的 widget 中 ，以将大小调整信息传递给 FlexibleSpaceBar;

实例演示

import 'package:flutter/material.dart'...

阅读全文...

简介

AppBar “应用栏”

• 应用栏由工具栏组成，或者是工具栏和其他 widget 组合形成，例如 TabBar和FlexibleSpaceBar;
• 应用栏通常用于 Scaffold.appBar 属性，该属性将应用栏放置在屏幕顶部的固定高度小部件中;
• 对于可滚动的应用栏，请参阅SliverAppBar，它将AppBar嵌入 sliver 中以便在CustomScrollView中使用;

基本用法

AppBar

• AppBar 在底部上方显示工具栏 widget，前导 leading ，标题 title 和操作 actions;

进阶用法

AppBar

• 一个完整的 AppBar...

阅读全文...

简介

BottomAppBar “底部应用栏”

• 一个通常与 Scaffold.bottomNavigationBar 一起使用的容器，可以在顶部有一个凹口，为重叠的FloatingActionButton腾出空间;

基本用法

通常与 Scaffold 和 FloatingActionButton 一起使用;

实例演示

import 'package:flutter/material.dart';

/*
* AppBar 默认的实例,无状态
* */
class AppBarLessDefaultSimple extends StatelessWidget {
  f...

阅读全文...

简介

一种布局方法

• 一个可以对齐子元素进行table 布局算法的Widget

基本用法

大多用于多行多列的需求

• 如果你只有一行或者一列，其实选择Row和Column更合适一些
• 表格中行的大小是根据列行数和宽度计算的来，控制列宽可以使用 columnWidth 属性
• 注意，Table中每一行的列数需要一致，否则报错

实例演示

import 'package:flutter/material.dart';

class TableDemo extends StatelessWidget {
  @override
  Widget build(BuildContext...

阅读全文...