0

每当我切换标签时,我都想更改我的 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,
                      ),
                    ),
                  ),
                ),
              ),
            )
          ],
        ),
      ),
    ),
  ),
);}

我尝试使用动态分配图像的解决方案,但我无法让它工作。

什么可能是解决这个问题?

4

0 回答 0