如何使用底部重叠组件制作固定的 SliverAppBar 标题

问题描述

我正在尝试使用 CustomScrollView 和 Slivers 获得低于输出。

但是我在使用 SliverAppBar 时遇到了两个问题，

1) 标题栏滚动隐藏

2) SliverAppBar bottom 属性在滚动时溢出。

这是我目前的代码。我在 CodePen 和这里添加了最少的代码，所以任何人都可以直接访问它。

在CodePen

import 'package:Flutter/material.dart';

final Color darkBlue = Color.fromARGB(255,18,32,47);

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      theme: ThemeData.dark().copyWith(scaffoldBackgroundColor: darkBlue),debugShowCheckedModeBanner: false,home: Scaffold(
        body: CustomScrollView(
          slivers: <Widget>[
            SliverAppBar(
              pinned: true,floating: false,elevation: 0,expandedHeight: 300.0,title: Text("Title"),flexibleSpace: FlexibleSpaceBar(
                background: Container(
                  child: Image.network(
                      'https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcR1VQ7GnY9bpez5Ec8Ce2acx-K3KqaDg91i6A&usqp=CAU'),),collapseMode: CollapseMode.parallax,bottom: PreferredSize(
                preferredSize: const Size.fromHeight(0.0),child: Transform.translate(
                  offset: const Offset(0,50),child: Container(
                    color: Colors.blue,padding: EdgeInsets.only(
                        top: 20,bottom: 20,left: 50,right: 50),margin: EdgeInsets.only(left: 20,right: 20,bottom: 20),child: Text("Section"),SliverList(
              delegate: SliverChildBuilderDelegate(
                (context,index) => ListTile(
                  tileColor: (index % 2 == 0) ? Colors.white : Colors.green[50],title: Center(
                    child: Text('$index',style: TextStyle(
                            fontWeight: FontWeight.normal,fontSize: 50,color: Colors.greenAccent[400]) //TextStyle
                        ),//Text
                  ),//Center
                ),//ListTile
                childCount: 51,//SliverChildBuildDelegate
            )
          ],);
  }
}

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）