每当我切换标签时,我都想更改我的 sliver appbar 中的图像,但我不知道 customliverappbardelegate 是否可以处理状态更改。
import 'package:clover/screens/Questions_tab/q_categories/childcare.dart';
import 'package:clover/screens/Questions_tab/q_categories/support.dart';
import 'package:flutter/material.dart';
import 'package:velocity_x/velocity_x.dart';
import 'q_categories/downs.dart';
class Questions extends StatefulWidget {
@override
State<Questions> createState() => _QuestionsState();
late AssetImage _imageToShow;
@override
initState() {
_imageToShow = AssetImage('youAssetImage');
}
}
class _QuestionsState extends State<Questions> {
var primaryColor = Color(0xffffffff);
int index = 0;
final style = TextStyle(color: Colors.white);
@override
Widget build(BuildContext context) {
return Scaffold(
body: DefaultTabController(
length: 3,
child: CustomScrollView(
physics: NeverScrollableScrollPhysics(),
slivers: [
SliverPersistentHeader(
delegate: CustomSliverAppBarDelegate(expandedHeight: 310),
pinned: true,
),
SliverAppBar(
backgroundColor: Colors.transparent,
toolbarHeight: 0,
bottom: TabBar(
onTap: (index) {
setState(() {
switch (index) {
case 0:
primaryColor = Color(0xff291e39);
break;
case 1:
primaryColor = Color(0xff192245);
break;
case 2:
primaryColor = Color(0xff5e122d);
break;
default:
}
});
},
tabs: [
Tab(
child: Container(
height: 20,
child: Text(
'Childcare',
style: TextStyle(color: Colors.black, fontSize: 18.0),
),
),
),
Tab(
child: Container(
height: 20,
child: Text(
'Downs',
style: TextStyle(color: Colors.black, fontSize: 18.0),
),
),
),
Tab(
child: Container(
height: 20,
child: Text(
'Support',
style: TextStyle(color: Colors.black, fontSize: 18.0),
),
),
),
],
),
),
new SliverFillRemaining(
child: TabBarView(
children: <Widget>[
Childcare(0xFFff5722),
Downs(0xffFF0000),
Support(0xffFF0000),
],
),
),
// buildImages(),
// tabs(context),
],
),
),
);
}
}
class CustomSliverAppBarDelegate extends SliverPersistentHeaderDelegate {
final double expandedHeight;
const CustomSliverAppBarDelegate({
required this.expandedHeight,
});
@override
Widget build(
BuildContext context, double shrinkOffset, bool overlapsContent) {
return Material(
child: buildAppBar(shrinkOffset, context),
);
}
double appear(double shrinkOffset) => shrinkOffset / expandedHeight;
double disappear(double shrinkOffset) => 1 - shrinkOffset / expandedHeight;
Widget buildAppBar(double shrinkOffset, BuildContext context) {
return Opacity(
opacity: disappear(shrinkOffset),
child: Expanded(
child: Container(
child: Padding(
padding: const EdgeInsets.only(top: 40.0),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Padding(
padding: const EdgeInsets.only(left: 20.0, bottom: 5),
child: Text("Questions").text.bold.black.xl2.make(),
),
Align(
alignment: Alignment.center,
child: Container(
child: ClipRRect(
borderRadius: BorderRadius.circular(5),
child: Container(
child: Align(
widthFactor: 0.9,
heightFactor: 0.8,
child: Image.asset(
"assets/Home_Illustration.png",
width: context.screenWidth * .87,
// fit: BoxFit.cover,
),
),
),
),
),
)
],
),
),
),
),
);
}
@override
double get maxExtent => expandedHeight;
@override
double get minExtent => kToolbarHeight + 30;
@override
bool shouldRebuild(SliverPersistentHeaderDelegate oldDelegate) => true;
}
上面是带有标签栏的自定义条子应用栏的屏幕代码。
下面是包含我要动态更改的图像的自定义应用栏的代码
Widget buildAppBar(double shrinkOffset, BuildContext context) {
return Opacity(
opacity: disappear(shrinkOffset),
child: Expanded(
child: Container(
child: Padding(
padding: const EdgeInsets.only(top: 40.0),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Padding(
padding: const EdgeInsets.only(left: 20.0, bottom: 5),
child: Text("Questions").text.bold.black.xl2.make(),
),
Align(
alignment: Alignment.center,
child: Container(
child: ClipRRect(
borderRadius: BorderRadius.circular(5),
child: Container(
child: Align(
widthFactor: 0.9,
heightFactor: 0.8,
child: Image.asset(
"assets/Home_Illustration.png",
width: context.screenWidth * .87,
// fit: BoxFit.cover,
),
),
),
),
),
)
],
),
),
),
),
);}
我尝试使用动态分配图像的解决方案,但我无法让它工作。
什么可能是解决这个问题?