Как добавить фиксированный AppBar на несколько прокручиваемых PageViews во флаттере - PullRequest
Новая
       7

Как добавить фиксированный AppBar на несколько прокручиваемых PageViews во флаттере

0 голосов
/ 10 октября 2018

Я хочу добавить прозрачную панель приложений поверх PageView.

Просмотр страницы реализован с использованием стеков во флаттере, так что весь контент размещается над изображением.Поскольку он отличается от того, как работают вкладки, мне нужно разместить панель приложений таким образом, чтобы даже во время прокрутки ч / б нескольких просмотров страниц панель приложений оставалась фиксированной в заданной позиции.

Я использую следующий код для достижения этой цели, но он показывает различные виды ошибок. 

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 используется для придания эффекта параллакса при прокрутке ч / б просмотров страниц.

Спасибо

1 Ответ

0 голосов
/ 11 октября 2018

Вы должны применить два изменения в вашем коде, чтобы принудительно задать высоту

  • Удалите StackFit.expand, потому что это заставляет полосу занимать весь экран
  • Оберните AppBarс контейнером или SizedBox и задайте высоту, чтобы ограничить его

И, наконец, установите прозрачный цвет и высоту 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),
          ),
        ),
      );
...