flutter - 如何在 NestedScrollView 中为 SliverAppBar 设置动画
问题描述
我正在尝试SliverAppBar
使用AnimatedBuilder
. 我需要知道如何RenderTransform
在NestedScrollView
.
我想SliverAppBar
在更改 a 上的选项卡时为视图设置动画TabBarView
(就像 WhatsApp 在您进入相机选项卡时所做的那样。
目前,我正在使用TabController
动画值和AnimatedBuilder
来翻译SliverAppBar
视野之外的内容。
这是我所做的:
import 'dart:async';
import 'package:flutter/material.dart';
class AppNavigator extends StatefulWidget {
const AppNavigator({
Key key,
@required this.cameraWidget,
@required this.chatsWidget,
}) : super(key: key);
final Widget cameraWidget;
final Widget chatsWidget;
@override
_AppNavigatorState createState() => _AppNavigatorState();
}
class _AppNavigatorState extends State<AppNavigator> with SingleTickerProviderStateMixin {
TabController _tabController;
@override
void initState() {
super.initState();
_tabController = TabController(initialIndex: 1, vsync: this, length: 4);
}
@override
void dispose() {
_tabController.dispose();
super.dispose();
}
@override
Widget build(BuildContext context) {
final tabs = /* some tabs */;
return Scaffold(
body: NestedScrollView(
headerSliverBuilder: (context, inner) {
return <Widget>[
AnimatedBuilder(
animation: _tabController,
child: SliverAppBar(
title: const Text('WhatsApp'),
pinned: true,
floating: true,
bottom: TabBar(
tabs: tabs,
isScrollable: true,
indicatorColor: Colors.white,
controller: _tabController,
),
backgroundColor: Color(0xff075e54),
),
builder: (context, child) {
if (_tabController.animation.value < 1) {
return child;
}
return Transform.translate(
child: child,
offset: Offset(0, _tabController.animation.value * -100),
);
},
),
];
},
body: TabBarView(
controller: _tabController,
children: <Widget>[
widget.cameraWidget,
widget.chatsWidget,
],
),
),
);
}
}
以下是我得到的错误:
I/flutter (25509): ══╡ EXCEPTION CAUGHT BY WIDGETS LIBRARY ╞═══════════════════════════════════════════════════════════
I/flutter (25509): The following assertion was thrown building AnimatedBuilder(animation: ScrollController#926c9(one
I/flutter (25509): client, offset 0.0), state: _AnimatedState#44dcb):
I/flutter (25509): A RenderNestedScrollViewViewport expected a child of type RenderSliver but received a child of type
I/flutter (25509): RenderTransform.
I/flutter (25509): RenderObjects expect specific types of children because they coordinate with their children during
I/flutter (25509): layout and paint. For example, a RenderSliver cannot be the child of a RenderBox because a
I/flutter (25509): RenderSliver does not understand the RenderBox layout protocol.
I/flutter (25509):
解决方案
推荐阅读
- node.js - 如何将旧版本的节点应用程序设置为过期?
- r - 使用循环从目录中读取文件并将它们保存为列表的元素
- mysql - 分组依据以查找 SQL 中特定索引的平均差异
- python-3.x - Pyomo 使用二进制变量优化最小成本
- html - 使用 CSS 和内部动画 SVG
标签是它的轴 - python - 为什么我的内存分析器内存使用没有改变?
- java - Firebase 身份验证 createUserWithEmailAndPassword 在具有电子邮件变量的物理设备上失败
- python - Pandas to_csv 正在从我的目标变量中排除行
- ios - 如何以编程方式在 UILabel 上设置accessibilityLabel?
- javascript - 如何将记录解析成json数据