【发布时间】：2021-10-24 10:37:15
【问题描述】：
我希望这些动画之间平滑，我尝试使用AnimatedSize、AnimatedOpacity 和AnimatedPositioned，但几乎没有错误。而且我不知道如何将这些与SliverAppBar 一起使用。在其他示例中，我看到有人使用LayoutBuilder，但他们没有分享完整的代码，所以我无法对其进行测试。我将分享我的代码 sn-p 但它在两种状态之间有一个非常奇怪的转换。
我希望CircleAvatar 变小并改变位置
我想让Icon(Icons.arrow_back) 和Text('Previous Page') 消失。
我也希望我的名字和工作消失。
我希望这三个Containers 变小并改变位置。
import 'package:flutter/material.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
// This widget is the root of your application.
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Dialog Demo',
debugShowCheckedModeBanner: false,
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: Scaffold(
body: CustomScrollView(
slivers: [
SliverAppBar(
elevation: 0,
pinned: true,
expandedHeight: 190,
collapsedHeight: kToolbarHeight + 8,
flexibleSpace: FlexibleSpaceBar(
collapseMode: CollapseMode.none,
centerTitle: true,
titlePadding: EdgeInsetsDirectional.only(
start: 20.0,
end: 20.0,
top: 12.0,
bottom: 12.0,
),
title: SafeArea(
child: Column(
children: [
Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
CircleAvatar(
radius: 16,
),
Row(
children: [
Container(
decoration: BoxDecoration(
color: Colors.white10,
borderRadius: BorderRadius.all(
Radius.circular(12),
),
),
padding: EdgeInsets.all(8.0),
child: Icon(Icons.person),
),
SizedBox(
width: 8,
),
Container(
decoration: BoxDecoration(
color: Colors.white10,
borderRadius: BorderRadius.all(
Radius.circular(12),
),
),
padding: EdgeInsets.all(8.0),
child: Icon(Icons.menu),
),
SizedBox(
width: 8,
),
Container(
decoration: BoxDecoration(
color: Colors.white10,
borderRadius: BorderRadius.all(
Radius.circular(12),
),
),
padding: EdgeInsets.all(8.0),
child: Icon(Icons.message),
),
],
),
],
),
],
),
),
background: SafeArea(
child: Column(
children: [
Container(
alignment: Alignment.topLeft,
child: Row(
children: [
IconButton(
icon: Icon(Icons.arrow_back),
onPressed: () {},
),
Text(
'PREVIOUS PAGE',
style: TextStyle(
fontSize: 12,
fontWeight: FontWeight.bold,
),
),
],
),
),
Padding(
padding: const EdgeInsets.only(
left: 20,
top: 12,
bottom: 24,
),
child: Row(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
CircleAvatar(
radius: 20,
),
SizedBox(
width: 12,
),
Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text(
'Sertan Hakkı İmamoğlu',
style: TextStyle(
fontSize: 18,
color: Colors.white,
fontWeight: FontWeight.bold,
),
),
Text(
'Student',
style: TextStyle(
fontSize: 14,
color: Colors.grey,
),
),
SizedBox(
height: 12,
),
Row(
children: [
Container(
decoration: BoxDecoration(
color: Colors.white10,
borderRadius: BorderRadius.all(
Radius.circular(12),
),
),
padding: EdgeInsets.symmetric(
horizontal: 34,
vertical: 12,
),
child: Icon(Icons.menu),
),
SizedBox(
width: 4,
),
Container(
decoration: BoxDecoration(
color: Colors.white10,
borderRadius: BorderRadius.all(
Radius.circular(12),
),
),
padding: EdgeInsets.symmetric(
horizontal: 34,
vertical: 12,
),
child: Icon(Icons.person),
),
SizedBox(
width: 4,
),
Container(
decoration: BoxDecoration(
color: Colors.white10,
borderRadius: BorderRadius.all(
Radius.circular(12),
),
),
padding: EdgeInsets.symmetric(
horizontal: 34,
vertical: 12,
),
child: Icon(Icons.message),
),
],
)
],
)
],
),
),
],
),
),
),
),
SliverList(
delegate: SliverChildBuilderDelegate(
(BuildContext context, int index) {
return Container(
color: index.isOdd ? Colors.white : Colors.black12,
height: 100.0,
child: Center(
child: Text('$index', textScaleFactor: 5),
),
);
},
childCount: 20,
),
),
],
),
),
);
}
}
【问题讨论】：
-
您需要
SliverPersistentHeader处理像您这样的更复杂的案例
标签： flutter dart user-interface animation visual-studio-code