Flutter ImageSlideshow 点击通过

Question

我想在 Flutter web 中点击我的 ImageSlideshow。这可能吗，怎么办，现在我只能刷了。

这是代码

ImageSlideshow(
                  width: 400,
                  height: 800,
                  initialPage: 0,
                  indicatorColor: HexColor("#ff9900"),
                  indicatorBackgroundColor: Colors.grey,
                  children: [
                    Image.asset(
                      'third.png',
                      fit: BoxFit.cover,
                    ),
                    Image.asset(
                      'second.png',
                      fit: BoxFit.cover,
                    ),
                    Image.asset(
                      'first.png',
                      fit: BoxFit.cover,
                    ),
                  ],
                  onPageChanged: (value) {
                    print('Page changed: $value');
                  },
                ),

这是错误产生的无状态部分。

class Information extends StatelessWidget {

PageController _pageController;

  @override
  void initState() {
    _pageController = PageController(
  initialPage: 0,
    );
    super.initState();
  }

  @override
  void dispose() {
    _pageController.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return MaterialApp(

感谢您的回答。

Answer 1

该功能未内置于该包中，但当您运行进入该场景时，您可以复制包代码并对其进行修改。主要区别在于您必须创建自己的 PageController 并将其传递给 ImageSlideShow。然后将每个 children 包装在 GestureDetector 中并手动告诉 _pageController 动画到 onTap.

中的下一页

将此添加到您拥有 ImageSlideShow.

的有状态小部件

 PageController _pageController;

  @override
  void initState() {
    _pageController = PageController(
      initialPage: 0,
    );
    super.initState();
  }

  @override
  void dispose() {
    _pageController.dispose();
    super.dispose();
  }

创建一个新文件并添加此修改版本的包代码。唯一的变化是它使用传入的 PageController 与内部创建的

import 'dart:async';

import 'package:flutter/material.dart';

class MyImageSlideshow extends StatefulWidget {
  MyImageSlideshow({
    @required this.children,
    @required this.pageController,
    this.width = double.infinity,
    this.height = 200,
    this.initialPage = 0,
    this.indicatorColor = Colors.blue,
    this.indicatorBackgroundColor = Colors.grey,
    this.onPageChanged,
  });
  final List<Widget> children;
  final double width;
  final double height;
  final int initialPage;
  final Color indicatorColor;
  final Color indicatorBackgroundColor;
  final ValueChanged<int> onPageChanged;
  final PageController pageController;

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

class _MyImageSlideshowState extends State<MyImageSlideshow> {
  final StreamController<int> _pageStreamController =
      StreamController<int>.broadcast();

  void _onPageChanged(int value) {
    _pageStreamController.sink.add(value);
    if (widget.onPageChanged != null) {
      widget.onPageChanged(value);
    }
  }

  Widget _indicator(BuildContext context) {
    return Wrap(
      spacing: 4,
      runSpacing: 4,
      alignment: WrapAlignment.center,
      children: List<Widget>.generate(
        widget.children.length,
        (index) {
          return StreamBuilder<int>(
            initialData: widget.pageController.initialPage,
            stream: _pageStreamController.stream.where(
              (pageIndex) {
                return index >= pageIndex - 1 && index <= pageIndex + 1;
              },
            ),
            builder: (_, AsyncSnapshot<int> snapshot) {
              return Container(
                width: 6,
                height: 6,
                decoration: ShapeDecoration(
                  shape: CircleBorder(),
                  color: snapshot.data == index
                      ? widget.indicatorColor
                      : widget.indicatorBackgroundColor,
                ),
              );
            },
          );
        },
      ),
    );
  }

  @override
  void initState() {
    super.initState();
  }

  @override
  void dispose() {
    _pageStreamController.close();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return SizedBox(
      width: widget.width,
      height: widget.height,
      child: Stack(
        children: [
          PageView.builder(
            onPageChanged: _onPageChanged,
            itemCount: widget.children.length,
            controller: widget.pageController,
            itemBuilder: (context, index) {
              return widget.children[index];
            },
          ),
          Positioned(
            left: 0.0,
            right: 0.0,
            bottom: 10.0,
            child: _indicator(context),
          ),
        ],
      ),
    );
  }
}

然后在您的页面上使用新的自定义 MyImageSlideshow 代替添加的 GestureDetectors.

MyImageSlideshow(
      pageController: _pageController,
      width: 400,
      height: 800,
      initialPage: 0,
      indicatorColor: HexColor("#ff9900"),
      indicatorBackgroundColor: Colors.grey,
      children: [
        GestureDetector(
          // this is where you're animating to the next picture
          onTap: () {
            if (_pageController.hasClients) {
              _pageController.animateToPage(
                1,
                duration: const Duration(milliseconds: 400),
                curve: Curves.easeInOut,
              );
            }
          },
          child: Image.asset(
            'third.png',
            fit: BoxFit.cover,
          ),
        ),
        GestureDetector(
          onTap: () {
            if (_pageController.hasClients) {
              _pageController.animateToPage(
                2,
                duration: const Duration(milliseconds: 400),
                curve: Curves.easeInOut,
              );
            }
          },
          child: Image.asset(
            'second.png',
            fit: BoxFit.cover,
          ),
        ),
        GestureDetector(
          onTap: () {
            if (_pageController.hasClients) {
              _pageController.animateToPage(
                0, // going back to first picture
                duration: const Duration(milliseconds: 400),
                curve: Curves.easeInOut,
              );
            }
          },
          child: Image.asset(
            'first.png',
            fit: BoxFit.cover,
          ),
        ),
      ],
      onPageChanged: (value) {
        print('Page changed: $value');
      },
    )

你应该这样做。

Flutter ImageSlideshow 点击通过

Flutter ImageSlideshow click through

slideshow

web

flutter

flutter-web