BottomBar 是不是有与 pin SliverAppBar 等效的方法？

Posted 2023-02-23

【中文标题】BottomBar 是不是有与 pin SliverAppBar 等效的方法？

【英文标题】：Is there an equivalent to pin SliverAppBar for BottomBar?BottomBar 是否有与 pin SliverAppBar 等效的方法？

【发布时间】：2017-10-23 21:18:49

【问题描述】：

我可以固定一个 SliverAppBar，然后在它下面滚动一个 SliverList 内容。是否有等价于让列表在 BottomBar 下滚动？

诀窍是我希望同时固定 AppBar 和 BottomBar 以产生滚动效果。

这是AppBar的渲染图

这是底部的渲染

我想在文本输入下滚动显示消息，而不是填充颜色。

这可能吗？谢谢。

【参考方案1】：

底部导航栏通常不会滚动。你能把你的BottomNavigationBar 放在Scaffold 的bottomNavigationBar 插槽中，如果你想把它带进和移出视野，可以使用AnimatedCrossFade 吗？如果这不能解决您的用例，请更具体地说明您想要实现的滚动效果。

编辑：如果您只想在屏幕底部放置一个小部件并将其堆叠在您的列表上，您可以使用Stack。

import 'dart:collection';
import 'package:flutter/scheduler.dart';
import 'package:flutter/material.dart';

void main() 
  runApp(new MyApp());


class MyApp extends StatelessWidget 
  @override
  Widget build(BuildContext context) 
    return new MaterialApp(
      title: 'Flutter Demo',
      theme: new ThemeData(
        primarySwatch: Colors.blue,
        primaryColorBrightness: Brightness.light,
      ),
      home: new MyHomePage(),
    );
  


class MyHomePage extends StatefulWidget 
  State createState() => new MyHomePageState();



class MyHomePageState extends State<MyHomePage> 
  ScrollController _scrollController = new ScrollController();

  List<Widget> _items = new List.generate(60, (index) 
    return new Text("item $index");
  );

  @override
  Widget build(BuildContext context) 
    return new Scaffold(
      body: new Stack(
        children: [
          new ListView(
            controller: _scrollController,
            children: new UnmodifiableListView(_items),
          ),
          new Positioned(
            top: 0.0,
            left: 0.0,
            right: 0.0,
            child: new AppBar(
              elevation: 0.0,
              backgroundColor: Colors.white.withOpacity(0.8),
              title: new Text('Sliver App Bar'),
            ),
          ),
          new Positioned(
            left: 0.0,
            right: 0.0,
            bottom: 0.0,
            child: new Container(
              decoration: new BoxDecoration(
                border: new Border.all(
                  width: 3.0,
                  color: Colors.blue.shade200.withOpacity(0.5)
                ),
                color: Colors.white.withOpacity(0.8),
                borderRadius: new BorderRadius.all(
                  new Radius.circular(10.0),
                ),
              ),
              height: 40.0,
              margin: const EdgeInsets.symmetric(
                horizontal: 20.0, vertical: 10.0)
            ),
          ),
        ],
      ),
    );
  

【讨论】：

添加了截图以获得更好的案例描述。谢谢科林。

没错，我开始使用 Sliver 隐藏栏，然后采用不透明的 Google Allo 样式隐藏，代码可以简化。感谢您的帮助科林。