如何實現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：-