分类标签归档:Flutter

Flutter CupertinoApp


简介

Cupertino 苹果设计风格的应用,用于创建 iOS 风格应用的顶层组件( Cupertino 苹果电脑的全球总公司所在地,位于美国旧金山 )

  • 它包含了 iOS 应用程序,通常需要的许多 widget;
  • 它的构建于基于 iOS 的 WidgetsApp 特定的默认值,如字体和物理滚动;

基本用法

CupertinoApp 的主要特性

  • top 级别的 Navigator 搜索的配置,需要遵循以下规则优先级
    • 首先,对于 根路由 "/", 使用 home 属性,前提是 home 属性不为空;
    • 如果没设置home,则使用 routes 属性,它应用程序的顶级路由表;
    • 如果 ho...

阅读全文...

Flutter CupertinoButton


简介

ios 风格的 button

  • 与普通的 button 一样,需要设置 text 或者 icon, 不同的是带有 fades out 效果;
  • 同时可以设置一个背景颜色;

基本用法

CupertinoButton 的一个是示例

  • 属性基本和 flatButton,raisedButton 类似

实例演示

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

/*
* Checkbox 默认按钮的实例
* index 当前checkbox 的...

阅读全文...

Flutter SwitchListTile


简介

Switch 的一个衍生组件

基本用法与Switch相同.具体参考Switch, 支持各种自定义样式.

实例演示

import 'package:flutter/material.dart';

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

class _Demo extends State<SwitchListTileDemo> {
  bool _lights = false;
  Widget build(Build...

阅读全文...

Flutter Switch


简介

Switch 是一个切换按钮组件,通常用于设置的选项里。

基本用法

通常用于Bool值参数的设置.

高级用法

当默认的样式无法满足需求时, 我们可以通过自定义各部件样式.

  • activeColor[Color] 当按钮状态通激活态时, 按钮的背景颜色
  • activeThumbImage [ImageProvider] 当按钮状态处于激活态时, 按钮的背景图像
  • activeTrackColor [Color] 当按钮状态处于激活态时, 滑轨的颜色
  • inactiveThumbColor [Color] 当按钮处于非激活状态时, 按钮的背景颜色, 与activeColor正好状态相反
  • ...

阅读全文...

Flutter SliderThemeData


简介

SliderTheme的data修饰属性 SliderThemeData

基本用法

配合SliderTheme, 修改slider组件各个部件的样式, 参照@Slider的各组件命名, 修改各部件样式

实例演示

import 'package:flutter/material.dart';


class SliderThemeDemo extends StatefulWidget {
  _SliderThemeDemo createState() => _SliderThemeDemo();
}

class _SliderThemeDemo extend...

阅读全文...

Flutter AnimatedSwitcher


简介

一个在新旧组件. 做渐变切换的组件. 有一定的动画效果

注意:

  • 如果你切换的足够快.超过了间隔时间, 组件只会隐藏第一个 .并渐渐显示最后一个生效的组件.
  • 如果你变更的组件.只是同一个组件, 不同的state或者不同的显示数据与状态. 请为当前组件每一个状态加入一个Key. 强制生效动画效果.

实例演示

import 'package:flutter/material.dart';

class AnimatedSwitcherDemo extends StatefulWidget {
  const AnimatedSwitcherDemo({Key key}...

阅读全文...

Flutter SliderTheme


简介

用来更改Slider样式的上层部件

将滑块主题应用于后代Slider小部件。

基本用法

通过更改sliderTheme.data, 修改Slider总体样式

基本属性参考以下代码:

SliderTheme(
  data: SliderThemeData({
    @required Color activeTrackColor,
    @required Color inactiveTrackColor,
    @required Color disabledActiveTrackColor,
    @required Color disabledInactiveTrac...

阅读全文...

Flutter Slider


简介

用来选择范围性的数据

slider 用来选择连续性的或者非连续性的数据. 默认是在一段最大值最小值间做任意值的选择. 如果你想选择间隔性的值, 例如0.0到50.0间,选择10, 15,...50.0这样的值, 给divisions设定一个非空的整数5,, 去分割区间范围.

基本用法

关于slider有以下的术语:

  • thumb 滑块 用户可以水平拖拽移动的区域

  • track 滑轨 thumb 可以滑动的线条区域

  • value indicator 值指示器 当用户拖拽thumb的时候. 显示用户当前所选的属性值

  • active 选中区

  • inactive 非选中区

如果onC...

阅读全文...

Flutter RadioListTile


简介

material design 风格的单选按钮附加文字label

点击文字的同时 , 将会出发 Radio的点击效果.

功能同 Radio

基本用法

Radio是单选框,和checkbox一样本身不包含状态,当groupValue = value时代表选中状态

实例演示

import 'package:flutter/material.dart';


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

class _Demo extends State<De...

阅读全文...

Flutter Radio


简介

material design 风格的单选按钮

Radio widget 代表表单中的单选按钮, 当groupValue = value时代表组件被选中。

在表单中, 单选按钮是表示一组互斥选项按钮中的一个。当一个按钮被选中,之前选中的按钮就变为非选中的。

基本用法

以下是Radio的属性主产明

  • activeColor → Color - 激活时的颜色。
  • groupValue → T - 选择组的值。
  • onChanged → ValueChanged - 改变时触发。
  • value → T - 单选的值。

实例演示

import 'package:flutter/mate...

阅读全文...