分类标签归档:Flutter

Flutter MergeableMaterialItem


简介

MaterialSlice 和 MaterialGap的基本类型

  • 所有的MergeableMaterialItem对象都需要LocalKey

基础用法

MaterialSlice进行演示

  • MaterialSlice做为 MergeableMaterial子类。它作为Material,可以和其他的slices合并使用

实例演示

import 'package:flutter/material.dart';

class MergeableMaterialItemDemo extends StatefulWidget {
  _MergeableMaterial...

阅读全文...

Flutter MaterialButton


简介

用于构建一个依赖于ButtonThem 和 Theme的按钮widget

  • 如果有必要,按钮的大小是自是适配于其子widget的
  • 最好不要直接使用这个widget,而应该可以考虑使用FlatButton、OutlineButton或者RaiseButton,他们包含一些和主题风格相适配的一些基础样式
  • 如果要直接创建按钮而不继承主题默认值,可以考虑使用 RawMaterialButton
  • 如果想使用ink-splash的效果但是又不想使用button,可以考虑使用InkWell

基本用法

尽量不要直接使用 MaterialButton

  • 如果 MaterialButton上的onP...

阅读全文...

Flutter MaterialColor


简介

定义单色以及具有十种色调的色样

  • 颜色的阴影由索引引用。指数越大,颜色越深。总共有十个有效指数:50、100、200、...、900.

基础用法

这里我们配合Icon来进行演示

  • 颜色的值应与指数500和shade500的值相同

实例演示

import 'package:flutter/material.dart';

const double kColorItemHeight = 48.0;

class Palette {
  Palette({this.name, this.primary, this.accent, this.threshold = 90...

阅读全文...

Flutter MaterialApp


简介

MaterialApp 代表 Material 设计风格的应用

  • 包含许多 Material设计风格所需要的一些基本控件
  • 在 WidgetsApp 中通过添加一些特定与 Material 设计风格的属性

基本用法

这里我们着重介绍MaterialApp 主要属性

  • title : 在任务管理窗口中所显示的应用名字
  • theme : 应用各种 UI 所使用的主题颜色
  • color : 应用的主要颜色值(primary color),也就是安卓任务管理窗口中所显示的应用颜色
  • home : 应用默认所显示的界面 Widget
  • routes : 应用的顶级导航表格,这个是多页面应用用来控制...

阅读全文...

Flutter CupertinoTabView


简介

具有自己的Navigator状态与历史记录的选项卡视图组件.

在使用时需要注意,该组件有自己的路由体系, 有自己的导航系统, 并且他自身内部的导航系统并不与任何父母元素共享

基本用法

关于它自身的路由体系, 有以下几点需要注意几点.

  • 在它的根路由映射('/'), 当它有 builder 属性的时候, 指向build的界面, 非得使用router中定义的根目录
  • 当组件未设定builder时, 在他的路由表 router 中, 一定要指定 '/' 跟路由, 不然会产生错误.
  • 当指定 onGenerateRoute 属性时, 它应该返回一个回空有效的route.
  • 如果所有的配置都未命中...

阅读全文...

Flutter CupertinoTimerPicker


简介

CupertinoTimerPicker 是一个ios风格下的时间选择组件

此选择器显示带有小时、分钟和秒的时间选择器。时间范围为0-23小时, 0-59分钟. 0-59秒.

基本用法

属性说明:

  • initialTimerDuration 初始化时间点
  • minuteInterval 分钟间隔, 我们设置为5, 则分钟选项为0,5,10,15...
  • mode 显示的格式, 我们可以控制该属性, 仅显示小时与分钟, 分钟与秒等, 具体查看 CupertinoTimerPickerMode
  • onTimerDurationChanged 时间改变后的回调
  • secondInterval ...

阅读全文...

Flutter CupertinoTabBar


简介

ios风格下底部导航组件.

通过BottomNavigationBarItem列表,在屏幕底部展示多个小组件, 默认下选择第一个小组件;

实例演示

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

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

class _Demo extends State<C...

阅读全文...

Flutter CupertinoTabScaffold


简介

实现iOS应用程序的选项卡式的根布局与结构。

一个在底部放置标签栏,标签栏之间或后面放置内容的脚手架.

这个脚手架, tabBar组件与tabBuilder组件是必须配置的。如果你为该脚手架配置的tabBar组件是 CupertinoTabBar的话. 它会自动监听CupertinoTabBar底部的切换事件, 去动态切换主体显示的内容.

选项卡的内容是使用tabBuilder选项卡生成器生成的。TabBuilder必须能够生成tabbar中组件数组长度相同数量的组件。不活动的选项卡将被移到后台并禁用其动画。

使用cupertinobview作为每个选项卡的内容,以支持具有并行导航...

阅读全文...

Flutter CupertinoSliverNavigationBar


简介

ios-11风格下拥有一个较大标题块的导航栏目

基本用法

该组件使用时. 必须做为含有slivers属性的滚动列表的子组件中,例如CustomScrollView

实例演示

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

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

class...

阅读全文...

Flutter CupertinoSwitch


简介

ios风格下的Switch组件, 用法与Switch组件相同

基本用法

基本用法与Switch基本相同. 不同点在于, 该组件仅支持自定义activeColor, 也就是支持自定义当按钮处于true状态下,按钮的背景色.

实例演示

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

class CupertinoSwitchDemo extends StatefulWidget {
  _Demo createState() => ...

阅读全文...