代码之家 › 专栏 › 技术社区 › Dimas Seto Rizky Goenardi

Flutter旋转木马图像控制器

flutter

Dimas Seto Rizky Goenardi · 技术社区 · 11 月前

我想建立一个入职页面,其中包含三张图片和不同的文本。所以我使用旋转木马图像,但当我想放置旋转木马控制器时,我遇到了一个错误,它说 "The argument type 'CarouselController' can't be assigned to the parameter type 'CarouselSliderController?'" 我该怎么解决这个问题?

这是我的代码:

class OnboardingPage extends StatefulWidget {
  const OnboardingPage({super.key});

  @override
  State<OnboardingPage> createState() => _OnboardingPageState();
}

class _OnboardingPageState extends State<OnboardingPage> {
  int currentIndex = 0;
  CarouselController carouselController = CarouselController();

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: lightBackgroundColor,
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            CarouselSlider(
              items: [
                Image.asset(
                  'assets/img_onboarding1.png',
                  height: 331,
                ),
                Image.asset(
                  'assets/img_onboarding2.png',
                  height: 331,
                ),
                Image.asset(
                  'assets/img_onboarding3.png',
                  height: 331,
                ),
              ],
              options: CarouselOptions(
                height: 331,
                viewportFraction: 1,
                enableInfiniteScroll: false,
                onPageChanged: (index, reason) {
                  setState(() {
                    currentIndex = index;
                  });
                },
              ),
              carouselController: carouselController,
            ),

and here is the image

2 回复 | 直到 11 月前

MendelG 11 月前

错误很明显:

The argument type 'CarouselController' can't be assigned to the parameter type 'CarouselSliderController?'

因为在你的代码中,你使用了 CarouselSlider :

CarouselSlider(
        items: [

你应该通过一个 CarouselSliderController .

但你正好路过 CarouselController --其可用于 CarouselView .

所以,使用a 旋转木马滑块控制器 使用您的代码:


class OnboardingPage extends StatefulWidget {
  const OnboardingPage({super.key});

  @override
  State<OnboardingPage> createState() => _OnboardingPageState();
}

class _OnboardingPageState extends State<OnboardingPage> {
  int currentIndex = 0;
  CarouselSliderController carouselController = CarouselSliderController();

  @override
  Widget build(BuildContext context) {
    return Scaffold(
        backgroundColor: lightBackgroundColor,
        body: Center(
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: [
              CarouselSlider(
                items: [
                  Image.asset(
                    'assets/img_onboarding1.png',
                    height: 331,
                  ),
                  Image.asset(
                    'assets/img_onboarding2.png',
                    height: 331,
                  ),
                  Image.asset(
                    'assets/img_onboarding3.png',
                    height: 331,
                  ),
                ],
                options: CarouselOptions(
                  height: 331,
                  viewportFraction: 1,
                  enableInfiniteScroll: false,
                  onPageChanged: (index, reason) {
                    setState(() {
                      currentIndex = index;
                    });
                  },
                ),
                carouselController: carouselController,
              ),
            ],
          ),
        ));
  }
}

Franklin Diaz 11 月前

您似乎正在使用carousel_slider,并且您正在使用材质的CarouselController。

试试这个:

...
class _OnboardingPageState extends State<OnboardingPage> {
  int currentIndex = 0;

  // Comment the controller of material package
  //CarouselController carouselController = CarouselController();

  // Add the controller of carousel_slider package
  final CarouselSliderController carouselController =
      CarouselSliderController();

  @override
  Widget build(BuildContext context) {
...