[Day05] Flutter with GetX carousel slider 水平轮播

Carousel slider

轮播动画原生要处理的话印象中是PageView

先建立一个widget class, 将package的封装一次
construct传入将要显示的资料与点击事件回传

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

class CarouselSlide extends StatelessWidget {
  CarouselSlide({Key? key, required this.dataList, required this.didSelected})
      : super(key: key);
  final List dataList;
  final Function(int index) didSelected;

  @override
  Widget build(BuildContext context) {
    return CarouselSlider(
      options: CarouselOptions(
        height: MediaQuery.of(context).size.width * 0.86 * 9 / 16,
        aspectRatio: 16 / 9,
        enableInfiniteScroll: true,
        autoPlay: true,
        autoPlayInterval: const Duration(seconds: 2),
      ),
      items: dataList.map((element) {
        final index = dataList.indexOf(element);
        return GestureDetector(
          onTap: () => didSelected(index),
          child: Container(
            margin: EdgeInsets.symmetric(horizontal: 5.0),
            decoration: BoxDecoration(color: Colors.transparent),
            child: Stack(
              alignment: Alignment.center,
              children: [
                ClipRRect(
                  borderRadius: BorderRadius.circular(10),
                  child: Container(
                      color: Colors.primaries[
                          Random().nextInt(Colors.primaries.length)]),
                ),
                Positioned(
                  child: Text(
                    "$index",
                    style: TextStyle(fontSize: 30, color: Colors.white),
                  ),
                ),
              ],
            ),
          ),
        );
      }).toList(),
    );
  }
}

CarouselOptions内的属性设定
autoPlay:
是否自动换下一张, autoPlayInterval:换下一张间格几秒
enableInfiniteScroll:
是否无限轮播,scrollDirection: 滑动方向(预设水平方向)

实际使用的页面, 呼叫刚封装的class

import 'package:flutter/material.dart';
import 'package:get/get.dart';
import 'package:it_home/component/CarouselSlide.dart';
import 'package:it_home/pages/carousel_slider/CarouselSlidePageController.dart';

class CarouselSlidePage extends GetView<CarouselSlidePageController> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('SliderListPage')),
      body: SafeArea(
        child: Center(
          child: CarouselSlide(
            dataList: controller.dataList,
            didSelected: (int index) {
              print("didTapped $index");
            },
          ),
        ),
      ),
    );
  }
}

因为有用到GetxController这边也把程序码一并放在这边
生成一个List用於资料显示

import 'package:get/get.dart';

class CarouselSlidePageController extends GetxController {
  final _dataList = [].obs;
  get dataList => this._dataList;

  @override
  void onInit() {
    _dataList.assignAll(Iterable<int>.generate(10).toList());
    super.onInit();
  }
}

最後画面如下