与 Carousel 堆叠导致应用程序崩溃

Question

将堆栈与轮播一起使用时，它适用于 which 但是当导航或滚动时，应用程序突然冻结并通过显示轮播 package 代码而崩溃。 我也用过 listview biulder。 这段代码只是轮播和堆栈

class Carousels extends StatelessWidget {
  const Carousels({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Stack(
      children: [
        ClipRRect(
          borderRadius: BorderRadius.only(
            topLeft: Radius.circular(20),
            topRight: Radius.circular(20),
          ),
          child: Carousel(
            autoplay: false,
            dotSize: 4.0,
            dotSpacing: 15.0,
            dotColor: Colors.lightBlueAccent,
            indicatorBgPadding: 5.0,
            dotBgColor: Color.fromARGB(255, 100, 99, 100).withOpacity(0.5),
            images: const [
              AssetImage('assets/finallogo.png'),
              AssetImage('assets/rr.png'),
            ],
          ),
        ),
        Positioned(
          top: 0,
          right: 5,
          child: Icon(
            Icons.favorite,
            color: Colors.red,
          ),
        ),
        Positioned(
          child: Icon(
            Icons.star_rate_sharp,
            color: Colors.white,
          ),
        )
      ],
    );
  }
}

Answer 1

像下面这样添加 Sizedbox

     class Carousels extends StatelessWidget {
      const Carousels({Key? key}) : super(key: key);
    
      @override
      Widget build(BuildContext context) {
        return Stack(
          children: [
     SizedBox(
         height:300
            ClipRRect(
              borderRadius: BorderRadius.only(
                topLeft: Radius.circular(20),
                topRight: Radius.circular(20),
              ),
              child: Carousel(
                autoplay: false,
                dotSize: 4.0,
                dotSpacing: 15.0,
                dotColor: Colors.lightBlueAccent,
                indicatorBgPadding: 5.0,
                dotBgColor: Color.fromARGB(255, 100, 99, 100).withOpacity(0.5),
                images: const [
                  AssetImage('assets/finallogo.png'),
                  AssetImage('assets/rr.png'),
                ],
              ),
             ),
            ),
            Positioned(
              top: 0,
              right: 5,
              child: Icon(
                Icons.favorite,
                color: Colors.red,
              ),
            ),
            Positioned(
              child: Icon(
                Icons.star_rate_sharp,
                color: Colors.white,
              ),
            )
          ],
        );
      }
    }

Answer 2

在我看来，你必须将你的stack包装到column中并应用expanded如下

@override
  Widget build(BuildContext context) {
    return Column(
      children: [
        Expanded(
          child: Stack(
            children: [
              ClipRRect(
                borderRadius: const BorderRadius.only(
                  topLeft: Radius.circular(20),
                  topRight: Radius.circular(20),
                ),
                child: ListView.builder( // here carousel widget
                  itemCount: 5,
                  scrollDirection: Axis.horizontal,
                  itemBuilder: (c, i) {
                    return Container(
                      height: 10,
                      width: 100,
                      color: Colors.black,
                    );
                  },
                ),
              ),
              const Positioned(
                top: 0,
                right: 5,
                child: Icon(
                  Icons.favorite,
                  color: Colors.red,
                ),
              ),
              const Positioned(
                child: Icon(
                  Icons.star_rate_sharp,
                  color: Colors.white,
                ),
              )
            ],
          ),
        ),
      ],
    );

Answer 3

你可以使用 carousel_slider package: carousel_slider: ^4.2.1

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

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: const MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  const MyHomePage({super.key, required this.title});

  final String title;

  @override
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  static List<String> categories = [
    'Soft Drinks',
    'Smoothies',
    'Water',
  ];

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: CarouselSlider(
        options: CarouselOptions(
          aspectRatio: 1.5,
          viewportFraction: 0.9,
          enlargeCenterPage: true,
          enlargeStrategy: CenterPageEnlargeStrategy.height,
          autoPlay: true
        ),
        items: categories
            .map((category) => HeroCarouselCard(category: category))
            .toList(),
      ),
    );
  }
}

class HeroCarouselCard extends StatelessWidget {
  final String? category;

  const HeroCarouselCard({Key? key, this.category})
      : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Container(
      margin: const EdgeInsets.symmetric(vertical: 20.0, horizontal: 5.0),
      child: ClipRRect(
          borderRadius: const BorderRadius.all(Radius.circular(5.0)),
          child: Stack(
            children: <Widget>[
              Image.network(
                  'https://images.unsplash.com/photo-1631631480669-535cc43f2327?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxzZWFyY2h8Mnx8YmFja2dyb3VuZCUyMGltYWdlfGVufDB8fDB8fA%3D%3D&w=1000&q=80',
                  fit: BoxFit.cover,
                  width: 1000.0),
              Positioned(
                bottom: 0.0,
                left: 0.0,
                right: 0.0,
                child: Container(
                  decoration: const BoxDecoration(
                    gradient: LinearGradient(
                      colors: [
                        Color.fromARGB(200, 0, 0, 0),
                        Color.fromARGB(0, 0, 0, 0)
                      ],
                      begin: Alignment.bottomCenter,
                      end: Alignment.topCenter,
                    ),
                  ),
                  padding: const EdgeInsets.symmetric(
                      vertical: 10.0, horizontal: 20.0),
                  child: Text(
                    category!,
                    style: TextStyle(
                      color: Colors.white
                    ),
                  ),
                ),
              ),
            ],
          )),
    );
  }
}