反向 CustomScrollView 中的 SliverAppBar

Question

我正在构建一个聊天app，我希望新的聊天消息从SliverList. SliverAppBar当足够的消息到达时，当滚动视图开始滚动时，我也希望滚动到视图之外（浮动）。

CustomScrollView我正在使用带有 anSliverAppBar和 a的反转SliverList：

CustomScrollView(
                keyboardDismissBehavior: ScrollViewKeyboardDismissBehavior.onDrag,
                reverse: true,
                controller: _scrollController,
                slivers: <Widget>[
                  SliverList(
                    delegate: SliverChildBuilderDelegate(
                      (context, index) {
                        return _messages[index];
                      },
                      childCount: _messages.length,
                    ),
                  ),
                  SliverAppBar(
                    title: Text('Chat App'),
                    centerTitle: true,
                    floating: true,
                  ),        
                ],
              ),

这样，SliverAppBar就位于 的顶部SliverList，但不在屏幕的顶部。是否可以将 设为SliverAppBar屏幕顶部，就好像没有反转一样？

Answer 1

我不确定我是否正确理解你的问题

import 'package:flutter/material.dart';

void main() {
  runApp(
    const MaterialApp(
      home: MyApp(),
    ),
  );
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Colors.amber,
      body: NestedScrollView(
        physics: const NeverScrollableScrollPhysics(),
        headerSliverBuilder: (context, innerBoxIsScrolled) {
          return [
            const SliverAppBar(
              title: Text('Chat App'),
              centerTitle: true,
              floating: true,
            )
          ];
        },
        body: ListView.builder(
          reverse: true,
          // shrinkWrap: true,
          padding: EdgeInsets.zero,
          itemBuilder: (context, index) {
            return _message(20 - index);
          },
          itemCount: 20,
        ),
      ),
    );
  }

  Widget _message(int index) {
    return Container(
      margin: const EdgeInsets.symmetric(vertical: 10, horizontal: 20),
      height: 60,
      color: Colors.green,
      child: Center(
        child: Text('Message $index'),
      ),
    );
  }
}