具有自定义布局和动画的 Flutter Collapsible Appbar

Question

我正在尝试创建一个展开后如下图所示的应用栏

折叠时我只需要应用栏中的初始文本列可用，因此图像应该逐渐消失，文本列动画并成为应用栏标题

我曾尝试将 SliverAppBar 与自定义 ScrollView 一起使用，但灵活空间的标题看起来不太好，我也不知道如何让图像单独消失并在折叠时仅显示文本。

目前是展开状态

当我试图折叠它时，会发生这种情况

下面是相同的代码

CustomScrollView(
    slivers: [
      SliverAppBar(
          pinned: true,
          leading: GestureDetector(
            onTap: () => Get.back(),
            child: const Icon(
              Icons.arrow_back,
              color: Colors.black,
            ),
          ),
          flexibleSpace: FlexibleSpaceBar(
            title: Padding(
              padding: const EdgeInsets.symmetric(horizontal: 16.0),
              child: Row(
                children: [
                  const Expanded(
                    child: Text.rich(
                      TextSpan(
                          text: "Buffet Deal\n",
                          style:
                              TextStyle(color: Colors.black, fontSize: 14),
                          children: [
                            TextSpan(
                              text: "Flash Deal",
                              style: TextStyle(
                                  color: Colors.black, fontSize: 10),
                            ),
                          ]),
                    ),
                  ),
                  if (_model.imgUrl != null)
                    CachedNetworkImage(
                      imageUrl: _model.imgUrl!,
                    ),
                  const SizedBox(
                    width: 18,
                  )
                ],
              ),
            ),
          ),
          expandedHeight: Get.height * 0.2,
          backgroundColor: const Color(0xFFFFF4F4)),
      SliverToBoxAdapter(
        child: Container()
      )
    ],
  ),

感谢您的帮助。提前致谢

Answer 1

要使 SliverAppBar 的灵活空间图像在扩展空间崩溃时消失，只需使用 FlexibleSpaceBar.background属性(property)。

要解决重叠文本，只需将 FlexibleSpaceBar 包裹在 LayoutBuilder 周围即可获取是否展开并调整文本位置。

查看下面的结果(还有 live demo on DartPad ):

import 'dart:math';

import 'package:flutter/material.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return const MaterialApp(
      title: 'Flutter Demo',
      home: MyHomePage(),
      debugShowCheckedModeBanner: false,
    );
  }
}

class MyHomePage extends StatelessWidget {
  const MyHomePage({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    final expandedHeight = MediaQuery.of(context).size.height * 0.2;
    return Scaffold(
      body: CustomScrollView(
        slivers: [
          SliverAppBar(
            pinned: true,
            leading: GestureDetector(
              onTap: () => {},
              child: const Icon(
                Icons.arrow_back,
                color: Colors.black,
              ),
            ),
            flexibleSpace: LayoutBuilder(builder: (context, constraints) {
              final fraction =
                  max(0, constraints.biggest.height - kToolbarHeight) /
                      (expandedHeight - kToolbarHeight);
              return FlexibleSpaceBar(
                title: Padding(
                  padding: const EdgeInsets.symmetric(horizontal: 16.0),
                  child: Row(
                    children: [
                      Expanded(
                        child: Padding(
                          padding: EdgeInsets.only(left: 24 * (1 - fraction)),
                          child: const Text.rich(
                            TextSpan(
                                text: "Buffet Deal\n",
                                style: TextStyle(
                                    color: Colors.black, fontSize: 14),
                                children: [
                                  TextSpan(
                                    text: "Flash Deal",
                                    style: TextStyle(
                                        color: Colors.black, fontSize: 10),
                                  ),
                                ]),
                          ),
                        ),
                      ),
                      const SizedBox(width: 18)
                    ],
                  ),
                ),
                background: Align(
                  alignment: Alignment.centerRight,
                  child: Image.network(
                    "https://source.unsplash.com/random/400x225?sig=1&licors",
                  ),
                ),
              );
            }),
            expandedHeight: MediaQuery.of(context).size.height * 0.2,
            backgroundColor: const Color(0xFFFFF4F4),
          ),
          const SliverToBoxAdapter(child: SizedBox(height: 1000))
        ],
      ),
    );
  }
}