Flutter ImageSlideshow click through

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。然后将每个子级包装在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');
},
)

这应该为你做。