我正在尝试使用SliverAppBar
来转换AnimatedBuilder
。我需要知道如何在RenderTransform
中使用NestedScrollView
子级。
在更改SliverAppBar
上的标签时,我想使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):