Question

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

Pageview是使用Flutter中的Stacks实现的，因此所有内容都将放置在图像上。由于它与Tabs的工作方式不同，因此我需要放置一个appBar，以便即使在滚动多个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小部件用于在滚动黑白浏览量时提供视差效果。

谢谢

Answer 1

您应该对代码进行两次更改以强制高度

删除StackFit.expand，因为它使条形图占据整个屏幕
用容器或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中的多个可滚动的PageViews上添加固定的AppBar

1 个答案: