0

我正在创建一个网站，并希望拥有像 SliverAppBar 或带有图像轮播的 SliverPersistentHeader。我完全可以做到，但我不希望图像轮播在我向下滚动时缩小。相反，我希望 SliverAppBar 消失，但宽度不会变小，而只是高度变小。我希望我的问题很清楚。如果有任何问题，请提出。这是我的代码：

import 'package:flutter/material.dart';
import 'package:flutter_app/Widgets/HomePageWidgets/ImageCarousel.dart';
import '../Widgets/GlobalWidgets/TopNavBar.dart';
//import 'package:flutter_app/Widgets/HomePageWidgets/HomePageImage.dart';
import '../Widgets/GlobalWidgets/BottomBar.dart';
import '../Widgets/HomePageWidgets/ImageCarousel.dart';
import '../Widgets/GlobalWidgets/OneCard.dart';
import '../Widgets/GlobalWidgets/TwoCards.dart';


class MyHomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    var screenSize = MediaQuery.of(context).size;
    return Material(
      child: Container(
        child: CustomScrollView (
          slivers: [
            // HomePageImage(), //wurde durch ImageCarousel() ersetzt
            SliverAppBar(
              expandedHeight: screenSize.height * 0.9,
              backgroundColor: Colors.white.withOpacity(1),
              flexibleSpace: ImageCarousel(), // AUTOPLAY MUSS ANGESTELLT WERDEN,
              ),
            SliverList(delegate: SliverChildListDelegate([
              //ImageCarousel(), // AUTOPLAY MUSS ANGESTELLT WERDEN
              Expanded(
                child: Container(

                  child: Row(
                    // Die Row mache ich nur hin, damit ich die Seite zentrieren kann. Wenn alles nach links soll, dann einfach Row entfernen
                    mainAxisAlignment: MainAxisAlignment.center,
                    children: [
                      TopNavBar(),
                    ],
                  ),
                ),
              ), //TopNavBar // TODO 1: DropDownButton muss noch erstellt werden // TODO 2: Funktionen zu den Buttons müssen hinzufügt werden
              OneCard(),
              Container(height: 1000,
                width: 500,),
              BottomBar(), // TODO 3: Funktionen zu den Buttons müssen hinzufügt werden
            ]))
          ],
        ),
      ),
    );
  }
}

这是我的图像轮播：

import 'package:flutter/material.dart';
import 'package:carousel_slider/carousel_slider.dart';

// https://pub.dev/packages/carousel_slider Link zum Package


class ImageCarousel extends StatefulWidget {
  @override
  _ImageCarouselState createState() => _ImageCarouselState();
}

class _ImageCarouselState extends State<ImageCarousel> {

  List imgList = [
    'assets/images/Mathildedoppelt.jpeg',
    'assets/images/reveuse2.jpeg',

  ];

  @override
  Widget build(BuildContext context) {
    var screenSize = MediaQuery.of(context).size;
    final double height = MediaQuery.of(context).size.height;
    return CarouselSlider(
      options: CarouselOptions(
        height: screenSize.height * 0.9, //Ich kann hier einfach * 1.2 rechnen und dann füllt es den ganzen Bildschirm aus
        aspectRatio: 16/9,
        viewportFraction: 1,
        initialPage: 0,
        enableInfiniteScroll: true,
        reverse: false,
        autoPlay: false, // AUTOPLAY MUSS UNBEDINGT AN
        autoPlayInterval: Duration(seconds: 6),
        autoPlayAnimationDuration: Duration(seconds: 3),
        enlargeCenterPage: false,
        scrollDirection: Axis.horizontal,
      ),
      items: imgList
          .map((item) => Container(
        child: Center(
            child: Image.network(
              item,
              fit: BoxFit.cover,
              height: height,
            )),
      ))
          .toList(),
    );
  }
}

这是带有 SliverPersistentHeader 的代码：

import 'package:flutter/material.dart';
import 'package:flutter_app/Widgets/HomePageWidgets/ImageCarousel.dart';
import '../Widgets/GlobalWidgets/TopNavBar.dart';
//import 'package:flutter_app/Widgets/HomePageWidgets/HomePageImage.dart';
import '../Widgets/GlobalWidgets/BottomBar.dart';
import '../Widgets/HomePageWidgets/ImageCarousel.dart';
import '../Widgets/GlobalWidgets/OneCard.dart';
import '../Widgets/GlobalWidgets/TwoCards.dart';


class MyHomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    var screenSize = MediaQuery.of(context).size;
    return Material(
      child: Container(
        child: CustomScrollView (
          slivers: [
            // HomePageImage(), //wurde durch ImageCarousel() ersetzt
            /*SliverAppBar(
              expandedHeight: screenSize.height * 0.9,
              backgroundColor: Colors.white.withOpacity(1),
              flexibleSpace: ImageCarousel(), // AUTOPLAY MUSS ANGESTELLT WERDEN,
              ),*/
            SliverPersistentHeader(
              delegate: MyDynamicHeader(),
            ),
            SliverList(delegate: SliverChildListDelegate([
              //ImageCarousel(), // AUTOPLAY MUSS ANGESTELLT WERDEN
              Expanded(
                child: Container(

                  child: Row(
                    // Die Row mache ich nur hin, damit ich die Seite zentrieren kann. Wenn alles nach links soll, dann einfach Row entfernen
                    mainAxisAlignment: MainAxisAlignment.center,
                    children: [
                      TopNavBar(),
                    ],
                  ),
                ),
              ), //TopNavBar // TODO 1: DropDownButton muss noch erstellt werden // TODO 2: Funktionen zu den Buttons müssen hinzufügt werden
              OneCard(),
              SizedBox(height: 20,),
              TwoCards(),
              Container(height: 1000,
                width: 500,),
              BottomBar(), // TODO 3: Funktionen zu den Buttons müssen hinzufügt werden
            ]))
          ],
        ),
      ),
    );
  }
}


class MyDynamicHeader extends SliverPersistentHeaderDelegate {

  @override
  Widget build(BuildContext context, double shrinkOffset, bool overlapsContent) {
    return ImageCarousel();
  }

  @override
  bool shouldRebuild(SliverPersistentHeaderDelegate _) => true;

  @override
  double get maxExtent => 650.0;

  @override
  double get minExtent => 0.0;
}
4

1 回答 1

0

交换时缺少一件事，它只会在交换时显示完整图像，就像交换时一样 2image 在屏幕上显示。但是动画功能不适用于carousel_slider. 虽然，但希望它能为您提供一个想法。在这种情况下，我可能会选择自动滚动列表并使用控制器。

演示代码：

import 'package:carousel_slider/carousel_slider.dart';
import 'package:flutter/material.dart';

class CustomSS extends StatefulWidget {
  CustomSS({Key? key}) : super(key: key);

  @override
  _CustomSSState createState() => _CustomSSState();
}

class _CustomSSState extends State<CustomSS> {
  final CarouselController controller = CarouselController();

  final imageList = [
    'assets/me.jpg',
    'assets/ocean.jpg',
  ];

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: LayoutBuilder(
        builder: (context, constraints) => Stack(
          children: [
            Align(
              alignment: Alignment.topCenter,
              child: _ImageCarouselState(
                controller: controller,
                imgList: imageList,
                size: Size(
                  constraints.maxWidth,
                  constraints.maxHeight * .4,
                ),
              ),
            ),
            Positioned(
              child: SizedBox(
                height: constraints.maxHeight,
                width: constraints.maxWidth,
                child: CustomScrollView(
                  slivers: [
                    SliverList(
                      delegate: SliverChildListDelegate(
                        [
                          ///ToolBar
                          SizedBox(
                            height: constraints.maxHeight * .4 + kToolbarHeight,
                            child: GestureDetector(
                              onHorizontalDragEnd: (details) {
                                if (details.primaryVelocity! > 0) {
                                  controller.previousPage();
                                }

                                // Swiping in left direction.
                                else if (details.primaryVelocity! < 0.0) {
                                  controller.nextPage();
                                }
                              },
                            ),
                          ),
                          Column(
                            children: List.generate(
                              122,
                              (index) => Container(
                                height: 100,
                                width: constraints.maxWidth,
                                color:
                                    index.isEven ? Colors.red : Colors.yellow,
                              ),
                            ),
                          ),
                        ],
                      ),
                    )
                  ],
                ),
              ),
            ),
          ],
        ),
      ),
    );
  }
}

class _ImageCarouselState extends StatelessWidget {
  final Size size;
  final List imgList;
  final CarouselController controller;
  _ImageCarouselState({
    Key? key,
    required this.size,
    required this.controller,
    required this.imgList,
  }) : super(key: key);
  @override
  Widget build(
    BuildContext context,
  ) {
    return Column(
      mainAxisSize: MainAxisSize.min,
      children: [
        CarouselSlider(
          carouselController: controller,
          options: CarouselOptions(
            height: size.height,
            // height: screenSize.height *
            //     0.9, //Ich kann hier einfach * 1.2 rechnen und dann füllt es den ganzen Bildschirm aus
            aspectRatio: 16 / 9,
            viewportFraction: 1,
            initialPage: 0,
            enableInfiniteScroll: true,
            reverse: false,
            // autoPlay: true, // AUTOPLAY MUSS UNBEDINGT AN
            // autoPlayInterval: Duration(seconds: 1),
            // autoPlayAnimationDuration: Duration(seconds: 1),
            enlargeCenterPage: false,
            // scrollDirection: Axis.horizontal,
          ),
          items: imgList
              .map((item) => Container(
                    width: size.width,
                    child: Center(
                        child: Image.network(
                      item,
                      fit: BoxFit.cover,
                    )),
                  ))
              .toList(),
        ),
        Container(
          height: kToolbarHeight,
          color: Colors.cyanAccent,
          width: size.width,
          child: Row(
            children: [
              Text(
                "TabBar",
              ),
              Text(
                "Or others",
              ),
              Text(
                "Items",
              ),
            ],
          ),
        )
      ],
    );
  }
}
于 2021-08-09T02:03:49.077 回答