简介

带有选中标记的 Material 设计风格的弹出菜单

• 默认高度为48px，水平布局使用 ListTile 复选标记是 Icons.done 图标，显示在 leading 位置
• 只有在状态为选中时才会显示图标

基本用法

配合 PopupMenuButton 使用

• enabled 属性控制item是否为可点击
• checked 标识item是否为选中状态

实例演示

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

c...

阅读全文...

简介

ListBody “列表组件”

• 作用是按给定的轴方向，按照顺序排列子节点。
• 是一个不常直接使用的控件，一般都会配合ListView或者Column等控件使用。

基本用法

布局行为

• 在主轴上，子节点按照顺序进行布局，在交叉轴上，子节点尺寸会被拉伸，以适应交叉轴的区域。
• 在主轴上，给予子节点的空间必须是不受限制的（unlimited），使得子节点可以全部被容纳，ListBody不会去裁剪或者缩放其子节点。
• ListBody的布局代码非常简单，根据主轴的方向，对子节点依次排布。

实例演示

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

阅读全文...

简介

ListView “滚动列表”

• 一个非常常用的控件，涉及到数据列表展示的，一般情况下都会选用该控件。
• 跟GridView相似，基本上是一个slivers里面只包含一个SliverList的CustomScrollView。

基本用法

布局行为

• ListView在主轴方向可以滚动，在交叉轴方向，则是填满ListView。
• 一个组合控件。ListView跟GridView类似，都是继承自BoxScrollView。
• 在Flutter中有几种构建ListView的方式,分别是: 默认List，ListView.builder， ListView.separated，ListView...

阅读全文...

简介

AnimatedList “动画滚动容器”

• 一个滚动容器，可在插入或移除项目时为其设置动画

基本用法

AnimatedList

• AnimatedListState 可用于动态插入或删除项目。
• 下面示例展示效果:点击+号增加 card, 点击 card 保持激活状态，再点击-号，减少 card。

实例演示

import 'package:flutter/material.dart';
import 'package:flutter_go/widgets/components/List/AnimatedList/model.dart';

cla...

阅读全文...

简介

SliverGrid 将多个item以每行二个的形式, 进行排列.

基本用法

创建

在排列列表时，将基于现有的小部件, 延迟创建可见子项的元素、状态和呈现对象。 也就是只有视口中的元素, 才会被创建, 类似于我们网页中的懒加载.

销毁

当元素滚动到视图之外时，关联的元素子树、状态和渲染对象将被销毁, 进入视觉窗口的元素将以懒加载的形式进行创建。

实例演示

import 'package:flutter/material.dart';


class SliverGridDemo extends StatefulWidget {
  _Demo createState...

阅读全文...

简介

GridView在移动端上非常的常见的滚动列表, 会占满给出的空间区域.

基本用法

创建一个列表

属性介绍

• scrollDirection：滚动的方向，有垂直和水平两种，默认为垂直方向（Axis.vertical）。
• reverse：默认是从上或者左向下或者右滚动的，这个属性控制是否反向，默认值为false，不反向滚动。
• controller：控制child滚动时候的位置。
• primary：是否是与父节点的PrimaryScrollController所关联的主滚动视图。
• physics：滚动的视图如何响应用户的输入。
• shrinkWrap：滚动方向的滚动视图内容是否应该由正在...

阅读全文...

简介

GridTileBar 通常用来做GridTile的header与footer组件;

基本用法

GridTileBar含有五个属性

• backgroundColor 描述GridTileBar的背景颜色
• leading GridTileBar左侧的widget, 通常我们用图标来占位
• subtitle 次标题
• title 主标题
• trailing GridTileBar右侧的widgett, 通常我们用来做交互操作类的组件

实例演示

import 'package:flutter/material.dart';


class GridTileDemo exten...

阅读全文...

简介

GridViewPaper是GridView中的item的一种展现形式, 会在上层浮现一层网络.

实例演示

import 'package:flutter/material.dart';

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

class _Demo extends State<GridPaperDemo> {

  Widget build(BuildContext context) {
    return Contai...

阅读全文...

简介

GridTile 是GridList中的一种瓷片组件;包含header, body, footer三部份;

基本用法

一个grid列表包含多个Item, 每个Item通常包含一些视觉丰富的内容(例如，图像), 我们可以用GridTileBar去定义他的页眉与页脚。

如下实例中, 第一个是item便是GridTile组件构成. 包含header, body, footer;

实例演示

import 'package:flutter/material.dart';


class GridTileDemo extends StatefulWidget {
  _Demo...

阅读全文...

简介

Dialog 向用户传递信息的弹出层。

-这个组件没有任何可操作的选项. 相比使用这个组件, 通常我们更喜欢使用 AlertDialog或者SimpleDialog

基本用法

通常作为子窗口小部件传递给showDialog，后者显示对话框。

进阶用法

犹豫当前组件没有任何可选项目, 我们可以通过自定义样式, 去完成自己想要的各种样式的弹框, 满足我们的个性化需求

注意事项: 当前弹出的dialog并非是一个单纯的组件, 而是一个新路由界面, 如果我想通过操作dialog中的内容, 直接使用setState触发的是原界面中的状态

实例演示

import 'package:fl...

阅读全文...