如何实现List的gridview水平滚动（轮播）<widget> function 在 flutter 中？</widget>

Question

我有一个菜单列表，它在一页内填充过多，因为菜单列表超出预期，我想通过水平滚动或轮播滑动将此列表视图更改为 gridview，因此当我滑动它时将显示其他菜单（卡片）在左侧，我之前使用List<Widget> function和ListView()创建卡片列表。 我想要三叠横牌，当我向左滑动时，它会显示其他三叠横牌，就像这样：

这是我以前的代码：

      Padding(
        padding: const EdgeInsetsDirectional.all(Dimensions.paddingSizeDefault),
        child: Obx(() => ListView(
              physics: const NeverScrollableScrollPhysics(),
              shrinkWrap: true,
              addSemanticIndexes: false,
              children: buildMainMenu(),
            )));

buildMainMenu()是List<Widget> function

Answer 1

要创建可滑动的堆栈小部件，请使用flutter_card_swiper package ( https://pub.dev/packages/flutter_card_swiper )。

有很多可滑动的包裹：-

https://pub.dev/packages?q=swipe+card

示例代码：-

class Example extends StatelessWidget {
  List<Container> cards = [
    Container(
      alignment: Alignment.center,
      child: const Text('1'),
      color: Colors.blue,
    ),
    2nd Widget,
    3nd Widget,
  ];

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Flexible(
        child: CardSwiper(
          cards: cards,
        ),
      ),
    );
  }
} 

完整代码：-

import 'package:flutter/material.dart';
import 'package:appinio_swiper/appinio_swiper.dart';
import 'package:flutter/cupertino.dart';

void main() => runApp(const Example());

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

  @override
  State<Example> createState() => _ExampleState();
}

class _ExampleState extends State<Example> {
  List<Container> cards = [
    Container(
      alignment: Alignment.center,
      color: CupertinoColors.activeBlue,
      child: const Text('1'),
    ),
    Container(
      alignment: Alignment.center,
      color: CupertinoColors.activeGreen,
      child: const Text('2'),
    ),
    Container(
      alignment: Alignment.center,
      color: CupertinoColors.activeOrange,
      child: const Text('3'),
    ),
    Container(
      alignment: Alignment.center,
      color: CupertinoColors.systemPink,
      child: const Text('4'),
    )
  ];

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        body: CupertinoPageScaffold(
          child: Center(
            child: SizedBox(
              height: 500,
              width: 400,
              child: AppinioSwiper(
                allowUnswipe: false,
                maxAngle: 2,
                direction: AppinioSwiperDirection.left,
                cards: cards,
              ),
            ),
          ),
        ),
      ),
    );
  }
}

Output：-