【 Flutter Unit 解牛篇 】代码折叠展开面板,怎么没有线?
零、前言
FlutterUnit是【张风捷特烈】长期维护的一个Flutter集录、指南的开源App
如果你还未食用,可参见总汇集:
【 FlutterUnit 食用指南】 开源篇
Flutter Unit 解牛篇
将对项目的一些实现点进行剖析。 很多朋友问我,你代码折叠面板怎么做的?ExpansionTile展开的线去不掉吧?
确实ExpansionTile
展开上下会有线,非常难看,所以我未使用ExpansionTile方案
折叠效果的核心代码在源码的:components/project/widget_node_panel.dart
. |
. |
. |
---|---|---|
一、AnimatedCrossFade实现方案
核心的组件是:
AnimatedCrossFade
,可能很少人用,但它是一个十分强大的组件 你可以在FlutterUnit app中进行搜索体验。
. |
. |
. |
. |
---|---|---|---|
1. AnimatedCrossFade的基本用法
-
AnimatedCrossFade
可以包含两个组件firstChild
和secondChild
- 可指定枚举状态量
crossFadeState
,有两个值showFirst
和showSecond
- 当状态量改变时,会根据状态显示第一个或第二个。切换时会淡入淡出。
- 可以指定动画时长。如下分别是
200ms,400ms,600ms
的效果:
200ms |
400ms |
600ms |
---|---|---|
class TolyExpandTile extends StatefulWidget {
@override
_TolyExpandTileState createState() => _TolyExpandTileState();
}
class _TolyExpandTileState extends State<TolyExpandTile>
with SingleTickerProviderStateMixin {
var _crossFadeState = CrossFadeState.showFirst;
bool get isFirst => _crossFadeState == CrossFadeState.showFirst;
@override
Widget build(BuildContext context) {
return Container(
padding: EdgeInsets.all(20),
child: Column(
children: [
Row(
children: [
Expanded(
child: Container(),
),
GestureDetector(
onTap: _togglePanel,
child: Padding(
padding: const EdgeInsets.all(8.0),
child: Icon(Icons.code),
))
],
),
_buildPanel()
],
),
);
}
void _togglePanel() {
setState(() {
_crossFadeState =
!isFirst ? CrossFadeState.showFirst : CrossFadeState.showSecond;
});
}
Widget _buildPanel() => AnimatedCrossFade(
firstCurve: Curves.easeInCirc,
secondCurve: Curves.easeInToLinear,
firstChild: Container(),
secondChild: Container(
height: 150,
color: Colors.blue,
),
duration: Duration(milliseconds: 300),
crossFadeState: _crossFadeState,
);
}
复制代码
2. 和ToggleRotate
联用
ToggleRotate
是我写的一个非常小的组件包,toggle_rotate: ^0.0.5
用于点击时组件自动旋转
和转回
的切换。详见文章: toggle_rotate
45度 |
90度 |
---|---|
Flutter Unit
基本就是根据这种方法实现的代码面板折叠。
- |
- |
---|---|
二、魔改ExpansionTile
实现方案
上周六晚8:30
在B站直播
了ExpansionTile源码的解析。 只要看懂源码,其实魔改一下也是so easy 的。核心就是下面border的锅 注释掉即可, 你也可以修改其中的_kExpand
常量来控制动画的时长。
注意: 一切对源码的魔改,都需要拷贝出来,新建文件,别直接改源码。
下面的代码是处理之后的,可以拿去直接用
。
去边线前 |
去边线后 |
---|---|
// Copyright 2017 The Chromium Authors. All rights reserved.
// Use of this source code is governed by a BSD-style license that can be
// found in the LICENSE file.
import 'package:flutter/material.dart';
import 'package:flutter/widgets.dart';
const Duration _kExpand = Duration(milliseconds: 200);
class NoBorderExpansionTile extends StatefulWidget {
const ExpansionTile({
Key key,
this.leading,
@required this.title,
this.subtitle,
this.backgroundColor,
this.onExpansionChanged,
this.children = const [],
this.trailing,
this.initiallyExpanded = false,
}) : assert(initiallyExpanded != null),
super(key: key);
final Widget leading;
final Widget title;
final Widget subtitle;
final ValueChanged<bool> onExpansionChanged;
final List children;
final Color backgroundColor;
final Widget trailing;
final bool initiallyExpanded;
@override
_ExpansionTileState createState() => _ExpansionTileState();
}
class _ExpansionTileState extends State<ExpansionTile> with SingleTickerProviderStateMixin {
static final Animatable<double> _easeOutTween = CurveTween(curve: Curves.easeOut);
static final Animatable<double> _easeInTween = CurveTween(curve: Curves.easeIn);
static final Animatable<double> _halfTween = Tween<double>(begin: 0.0, end: 0.5);
final ColorTween _borderColorTween = ColorTween();
final ColorTween _headerColorTween = ColorTween();
final ColorTween _iconColorTween = ColorTween();
final ColorTween _backgroundColorTween = ColorTween();
AnimationController _controller;
Animation<double> _iconTurns;
Animation<double> _heightFactor;
Animation _borderColor;
Animation _headerColor;
Animation _iconColor;
Animation _backgroundColor;
bool _isExpanded = false;
@override
void initState() {
super.initState();
_controller = AnimationController(duration: _kExpand, vsync: this);
_heightFactor = _controller.drive(_easeInTween);
_iconTurns = _controller.drive(_halfTween.chain(_easeInTween));
_borderColor = _controller.drive(_borderColorTween.chain(_easeOutTween));
_headerColor = _controller.drive(_headerColorTween.chain(_easeInTween));
_iconColor = _controller.drive(_iconColorTween.chain(_easeInTween));
_backgroundColor = _controller.drive(_backgroundColorTween.chain(_easeOutTween));
_isExpanded = PageStorage.of(context)?.readState(context) ?? widget.initiallyExpanded;
if (_isExpanded)
_controller.value = 1.0;
}
@override
void dispose() {
_controller.dispose();
super.dispose();
}
void _handleTap() {
setState(() {
_isExpanded = !_isExpanded;
if (_isExpanded) {
_controller.forward();
} else {
_controller.reverse().then<void>((void value) {
if (!mounted)
return;
setState(() {
// Rebuild without widget.children.
});
});
}
PageStorage.of(context)?.writeState(context, _isExpanded);
});
if (widget.onExpansionChanged != null)
widget.onExpansionChanged(_isExpanded);
}
Widget _buildChildren(BuildContext context, Widget child) {
return Container(
color: _backgroundColor.value ?? Colors.transparent,
child: Column(
mainAxisSize: MainAxisSize.min,
children: [
ListTileTheme.merge(
iconColor: _iconColor.value,
textColor: _headerColor.value,
child: ListTile(
onTap: _handleTap,
leading: widget.leading,
title: widget.title,
subtitle: widget.subtitle,
trailing: widget.trailing ?? RotationTransition(
turns: _iconTurns,
child: const Icon(Icons.expand_more),
),
),
),
ClipRect(
child: Align(
heightFactor: _heightFactor.value,
child: child,
),
),
],
),
);
}
@override
void didChangeDependencies() {
final ThemeData theme = Theme.of(context);
_borderColorTween
..end = theme.dividerColor;
_headerColorTween
..begin = theme.textTheme.subhead.color
..end = theme.accentColor;
_iconColorTween
..begin = theme.unselectedWidgetColor
..end = theme.accentColor;
_backgroundColorTween
..end = widget.backgroundColor;
super.didChangeDependencies();
}
@override
Widget build(BuildContext context) {
final bool closed = !_isExpanded && _controller.isDismissed;
return AnimatedBuilder(
animation: _controller.view,
builder: _buildChildren,
child: closed ? null : Column(children: widget.children),
);
}
}
复制代码
在
直播
中说了ExpansionTile的核心实现是通过ClipRect
和Align
没错,又是神奇的Align
,它的heightFactor可以控制高度的分率。
ClipRect(
child: Align(
alignment: Alignment.topCenter,
heightFactor: _heightFactor.value,
child: child,
),
),
默认从中间开始 |
设置alignment: Alignment.topCenter |
---|---|
这样就能控制从哪里出现。还是那句话:
源码在手,天下我有。
没事多看看源码的实现,对自己是很有帮助的。这也是直播源码之间
的初衷,别再问什么学习方法了,学会debug,然后逼自己看源码是最快的成长方式。
有线 |
无线 |
---|---|
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- ubuntu中python调用C/C++办法之动态链接库详解
- linux中使用boost.python调用c++动态库的办法
- 在Linux系统下上传项目到码云的办法
- PHP global全局变量经典应用与注意事项分析【附$GLOBALS用法对比】 原创
- Linux(Ubuntu 18.04)上安装Anaconda步骤详解
- php web环境和命令行环境下查找php.ini的位置
- PHP大文件分块上传功能实例详解
- Linux 命令行通配符及转义符的实现
- Python爬虫抓取指定网页图片代码实例
- PHP变量作用域(全局变量&局部变量)&global&static关键字用法实例分析
- CentOS 7 安装Chrome浏览器的方法
- PHP高级编程之消息队列原理与实现方法详解
- thinkphp5.1框架模板布局与模板继承用法分析
- Linux内核设备驱动之内存管理笔记整理
- Matplotlib 绘制饼图解决文字重叠的方法