125 lines
3.7 KiB
Dart
125 lines
3.7 KiB
Dart
import 'dart:async';
|
|
import 'package:flutter/material.dart';
|
|
import 'package:maibu_satabot_v2/features/web_view/web_view_page.dart';
|
|
|
|
class BannerItem {
|
|
final String image;
|
|
final String title;
|
|
final String url;
|
|
|
|
BannerItem({required this.image, required this.title, required this.url});
|
|
}
|
|
|
|
class BannerCarousel extends StatefulWidget {
|
|
final List<BannerItem> items;
|
|
|
|
const BannerCarousel({Key? key, required this.items}) : super(key: key);
|
|
|
|
@override
|
|
State<BannerCarousel> createState() => _BannerCarouselState();
|
|
}
|
|
|
|
class _BannerCarouselState extends State<BannerCarousel> {
|
|
final PageController _controller = PageController();
|
|
int _currentIndex = 0;
|
|
Timer? _timer;
|
|
|
|
@override
|
|
void initState() {
|
|
super.initState();
|
|
_startAutoPlay();
|
|
}
|
|
|
|
void _startAutoPlay() {
|
|
_timer = Timer.periodic(Duration(seconds: 4), (timer) {
|
|
if (_controller.hasClients) {
|
|
_currentIndex++;
|
|
if (_currentIndex >= widget.items.length) {
|
|
_currentIndex = 0;
|
|
}
|
|
|
|
_controller.animateToPage(_currentIndex, duration: Duration(milliseconds: 300), curve: Curves.ease);
|
|
}
|
|
});
|
|
}
|
|
|
|
@override
|
|
void dispose() {
|
|
_timer?.cancel();
|
|
_controller.dispose();
|
|
super.dispose();
|
|
}
|
|
|
|
@override
|
|
Widget build(BuildContext context) {
|
|
return SizedBox(
|
|
height: 160,
|
|
child: Stack(
|
|
children: [
|
|
PageView.builder(
|
|
controller: _controller,
|
|
itemCount: widget.items.length,
|
|
onPageChanged: (index) {
|
|
setState(() {
|
|
_currentIndex = index;
|
|
});
|
|
},
|
|
itemBuilder: (context, index) {
|
|
final item = widget.items[index];
|
|
|
|
return GestureDetector(
|
|
onTap: () {
|
|
Navigator.push(context, MaterialPageRoute(builder: (_) => WebViewPage(url: item.url)));
|
|
},
|
|
child: Container(
|
|
margin: EdgeInsets.symmetric(horizontal: 12),
|
|
decoration: BoxDecoration(
|
|
borderRadius: BorderRadius.circular(12),
|
|
image: DecorationImage(image: AssetImage(item.image), fit: BoxFit.cover),
|
|
),
|
|
child: Stack(
|
|
children: [
|
|
Positioned(
|
|
left: 12,
|
|
bottom: 12,
|
|
child: Text(item.title, style: TextStyle(color: Colors.white, fontSize: 16)),
|
|
),
|
|
],
|
|
),
|
|
),
|
|
);
|
|
},
|
|
),
|
|
|
|
/// 指示器
|
|
Positioned(
|
|
bottom: 8,
|
|
left: 0,
|
|
right: 0,
|
|
child: Row(
|
|
mainAxisAlignment: MainAxisAlignment.center,
|
|
children: List.generate(widget.items.length, (index) {
|
|
return Container(
|
|
margin: EdgeInsets.symmetric(horizontal: 3),
|
|
width: _currentIndex == index ? 10 : 6,
|
|
height: 6,
|
|
decoration: BoxDecoration(color: _currentIndex == index ? Colors.white : Colors.white54, borderRadius: BorderRadius.circular(3)),
|
|
);
|
|
}),
|
|
),
|
|
),
|
|
Positioned(
|
|
top: 12,
|
|
right: 24,
|
|
child: Container(
|
|
padding: EdgeInsets.symmetric(horizontal: 8, vertical: 4),
|
|
decoration: BoxDecoration(color: Colors.black.withOpacity(0.5), borderRadius: BorderRadius.circular(4)),
|
|
child: Text('了解我们', style: TextStyle(color: Colors.white, fontSize: 14)),
|
|
),
|
|
),
|
|
],
|
|
),
|
|
);
|
|
}
|
|
}
|