flutter 反向CustomScrollView中的SliverAppBar

htzpubme 于 2023-03-31 发布在 Flutter

关注(0)|答案(1)|浏览(124)

我正在构建一个聊天app，我希望新的聊天消息从SliverList的底部到达。以及我希望SliverAppBar滚动视图开始滚动时，足够的消息到达时，滚动视图（浮动）。
我使用了一个反向的CustomScrollView，一个SliverAppBar和一个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设置为屏幕的顶部，就像没有反转一样？

flutter

来源：https://stackoverflow.com/questions/67099039/sliverappbar-in-reversed-customscrollview

1条答案

按热度按时间

f0brbegy1#

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

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'),
      ),
    );
  }
}

赞(0）回复(0）举报 2023-03-31

我来回答

flutter 反向CustomScrollView中的SliverAppBar

1条答案

相关问题

热门标签

最新问答