如何在 flutter 中的多个可滚动页面视图上添加固定的 AppBar

Question

我想在 PageView 上添加一个透明的 appBar。

Pageview是在Flutter中使用Stacks实现的，所以所有的内容都放在一张图片上。由于它与 Tabs 的工作方式不同，我需要放置一个 appBar，这样即使在滚动 b/w 多个 pageView 期间，appBar 仍然固定在给定位置。

我正在使用以下代码来实现此目的，但它显示了各种错误。

import 'package:flutter/material.dart';
import 'package:page_transformer/data.dart';
import 'package:page_transformer/intro_page_item.dart';
import 'package:page_transformer/page_transformer.dart';

class IntroPageView extends StatelessWidget{


  @override
  Widget build(BuildContext context) {
    List<Widget> children = new List();



    return
        Stack(
        fit: StackFit.expand,
        children: [
          _buildBackground(),
          _buildforeground()

        ],
      );
  }



  Widget _buildforeground() => new AppBar(

  title: Text('Antara',
    textDirection: TextDirection.rtl,),


  );

  Widget _buildBackground() =>  PageTransformer(
    pageViewBuilder: (context, visibilityResolver) {
      return PageView.builder(
        controller: PageController(viewportFraction: 1.0),
        itemCount: sampleItems.length,
        itemBuilder: (context, index) {
          final item = sampleItems[index];
          final pageVisibility =
          visibilityResolver.resolvePageVisibility(index);

          return IntroPageItem(
            item: item,
            pageVisibility: pageVisibility,
          );
        },
      );
    },
  );
}

请告诉我哪里错了，另外，我忘了提到页面浏览量是有状态的小部件，PageTransformer 小部件用于在滚动 b/w 页面浏览量时提供视差效果。

谢谢

Answer 1

您应该对代码应用两个更改以强制高度

删除StackFit.expand，因为它会使栏占据整个屏幕
用 Container 或 SizedBox 包裹 AppBar 并提供一个高度来约束它

最后将透明颜色和高度设置为 0.0

  @override
  Widget build(BuildContext context) {
    List<Widget> children = new List();

    return Stack(
      //fit: StackFit.expand,
      children: [
        _buildBackground(),
        _buildforeground(),
      ],
    );
  }

  Widget _buildforeground() => SizedBox(
        height: 80.0,
        child: new AppBar(
          backgroundColor: Colors.transparent,
          elevation: 0.0,
          title: Text(
            'Antara',
            textDirection: TextDirection.rtl,
            style: TextStyle(color: Colors.grey),
          ),
        ),
      );

如何在 flutter 中的多个可滚动页面视图上添加固定的 AppBar

How to add a fixed AppBar over multiple scrollable PageViews in flutter

user-interface

android

flutter

flutter-layout