分类目录归档:Flutter

Flutter DropdownButton


简介

Dropdown button “用于从项目列表中进行选择的按钮”

  • 参数类型 T 是下拉菜单表示的值的类型。给定菜单中的所有条目必须表示具有一致类型的值。通常,使用枚举。每个DropdownMenuItem在项目必须专门与同类型的说法;

基本用法

此示例显示一个包含四个项目的菜单

实例演示

import 'package:flutter/material.dart';

/*
* DropdownButton 默认按钮的实例
* isDisabled:是否是禁用,isDisabled 默认为true
* */
var selectItValue;
var sel...

阅读全文...

Flutter ScrollView


简介

一个可以使内容滚动的Widget

可滚动的 widget 包含三部分

  • 一个Scrollable的widget,可以用来监听用户的一些手势事件
  • 例如Viewport和ShrinkWrappingViewport的视图widget,可以通过在滚动视图中仅展示部分widget来进行可视化设计
  • 一个或者多个组件,可以通过组合来实现各种滚动效果。例如列表、网格等

基本用法

ScrollView 属于抽象类,不能直接实例化.

例如ListView widget是通过继承 BoxScrollView 然后BoxScrollView通过继承ScrollView来实现继承

  • ListView :...

阅读全文...

Flutter Tab


简介

属于 Material 风格下的一个widget

  • 如果同时给Tab传入icon和text,text将会被展现在icon的下面

基本用法

通常需要配合TabBar TabBarView使用

  • TabBar中的children和TabBarView中的数组成一一对应关系
  • TabController 可以协调TabBarView和Tab之间的选择和个数等

实例演示

import 'package:flutter/material.dart';

class TabDemo extends StatelessWidget {
  @override
  Widget ...

阅读全文...

Flutter ScrollPhysics


简介

确定滚动组件的物理属性

  • 例如,确定当用户达到最大滚动范围或者停止滚动时,Scrollable的一些滚动行为
  • 当启动物理 https://docs.flutter.io/flutter/physics/Simulation-class.html 时,当前滚动位置和速度将作为初始条件。
  • 使用simulation中的模拟移动来确定widget的滚动位置

基本用法

该widget不能赋值给参数类型为Widget的组件

  • 下方Demo,我们设置PageView的physics属性,滑动感受下下方小字自定义的滚动

实例演示

import 'package:flutter/mate...

阅读全文...

Flutter ScrollbarPainter


简介

用于绘制滚动条的CustomPainter。

  • 与CustomPainter子类化的CustomPainters不同,只有当shouldRepaint返回true时才重绘
  • 当滚动条消失和滚动位置发生变化的时候painter需要重绘而不是重新构建

基本使用

当ScrollbarPainter不再使用的时候,必须在ScrollbarPainter上调用dispose

  • 除非自定制Scrollbar的需求,基本上我们都可以使用Scrollbar
  • Scrollbar的源码其实就是基于ScrollbarPainter封装的
  • demo中将Scrollbar源码进行提取使用
  • Cupertino...

阅读全文...

Flutter ScrollMetrics


简介

包含当前ViewPort及滚动位置等信息

  • pixels:当前滚动位置
  • maxScrollExtent:最大可滚动长度。
  • extentBefore:滑出ViewPort顶部的长度;
  • extentInside:ViewPort内部长度;此示例中屏幕显示的列表部分的长度
  • extentAfter:列表中未滑入ViewPort部分的长度;此示例中列表底部未显示到屏幕范围部分的长度
  • atEdge:是否滑到了Scrollable Widget的边界

基本用法

抽象类,不可被实例化

  • FixedScrollMetrics,它是实现此接口的不可变对象
  • 下方Demo中,在接收到滚动事件时,参数类型...

阅读全文...

Flutter NestedScrollView


简介

一个可以嵌在另一个滚动视图中的Scroll view,本质上,他们的滚动是连接着的

  • 最常见的用例就是一个可滚动的视图,包含一个 flexible SliverAppBar,并且包含TabBar和TabBarView
  • 在普通的ScrollView中包含一系列 slivers ,会出现滚动冲突的问题
  • NestedScrollView 通过为外部ScrollView和内部的ScrollViews提供自定义的ScrollController来解决滚动冲突的问题,将他们“连接”起来,以便他们滚动时看起来更像是一个整体

基本用法

Demo演示NestedScrollView最常见的使用实例...

阅读全文...

Flutter Scrollable


简介

一个可以使内容滚动的Widget

  • 实现了可滚动widget的交互模型,但不包含UI显示相关的逻辑
  • 很难直接构造Scrollable。当然,我们可以考虑使用ListView或者GridView,他们结合了滚动、视口以及布局模型。如果需要自定义布局模型,可以考虑使用 CustomScrollView 。

基本用法

  • 静态方法 Scrollable.of 和 Scrollable.ensureVisible 通常用于ListView或者GridView中的Scrollable小部件进行交互
  • 你可以提供自定义的ScrollController,以创建自定义ScrollPosition子...

阅读全文...

Flutter BoxScrollView


简介

使用单个子布局模型的ScrollView

  • ListView:一个使用的线性布局的BoxScrollView
  • GridView:一个使用二维布局模型的BoxScrollView
  • CustomScrollView:可以将多个子布局模型组合到一个滚动视图中

基本用法

由于是抽象类,所以不能直接实例化

  • 如上简介,我们可以写一个类继承BoxScrollView
  • Demo中,演示ListView的部分源码,用以实现继承BoxScrollView的代码编写,效果和ListView并无两样

实例演示

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

阅读全文...

Flutter CustomScrollView


简介

使用Slivers创建自定义滚动效果的ScrollView

  • CustomScrollView 主要是配合Slivers大家族使用,创建自定义的滚动效果
  • 如果需要创建可展开的AppBar,后跟list和grid,可使用这三种Slivers:SliverAppBar、SliverList和SliverGrid
  • 这些Slivers必须生成RenderSliver对象

基本用法

配合 Slivers使用

  • slivers 属性中我们添加SliverAppBar
  • SliverAppBar下方放置SliverFixedExtentList,注意此处并没有滚动冲突

实例演示

import ...

阅读全文...