如何在flutter carousel滑块中显示json数据

fnatzsnv 于 2022-12-30 发布在 Flutter

关注(0)|答案(1)|浏览(142)

我正在创建一个滑块，希望在转盘滑块中显示json数据，当然数据将来自API
需要什么步骤，你们能指导我吗，比如必须创建http方法来首先读取数据。

CarouselSlider(
              options: CarouselOptions(
                  aspectRatio: 1.5,
                  viewportFraction: 0.95,
                  enlargeStrategy: CenterPageEnlargeStrategy.height,
                  enlargeCenterPage: true,
                  reverse: false,
                  enableInfiniteScroll: true,
                  autoPlay: true,
                  autoPlayAnimationDuration: const Duration(milliseconds: 900),
                  initialPage: initialPage,
                  onPageChanged: (index, reason) {
                    setState(() {
                      initialPage = index;
                      debugPrint('$initialPage');
                    });
                  }),
              items: Category.categories
                  .map((category) => HeroCarouselCard(category: category))
                  .toList(),
            ),

这是我第一次做的事情，categories是另一个等价类，我在那里存储静态数据。

[
  {
    "CarouselName": "Others",
    "CarouselDescription": "A smartphone and tablet-based solution to register and report Factory Assembly Line Inspection information.",
    "CarouselImage": "banner3.png"
  },
  {
    "CarouselName": "Production",
    "CarouselDescription": "Grow your business",
    "CarouselImage": "banner1.jpg"
  }
]

下面是我想要使用的json

如果我能得到一个完整的示例就太好了，我不想使用getx

flutter

来源：https://stackoverflow.com/questions/74909473/how-to-show-json-data-in-flutter-carousel-slider

1条答案

按热度按时间

xnifntxz1#

最好和最简单的方法是创建一个未来的构建器，并在未来传递API调用在我的情况下，我已经使用http请求来获取所有的数据。

Container(
                            margin: const EdgeInsets.symmetric(
                                horizontal: 10, vertical: 10),
                            width: MediaQuery.of(context).size.width,
                            child: FutureBuilder(
                                future: future,
                                builder: (context, snapshot) {
                                  final items = snapshot.data;
                                  switch (snapshot.connectionState) {
                                    case ConnectionState.waiting:
                                      return const Center(
                                        child: RepaintBoundary(
                                            child: HomeCardShimmerEffect()),
                                      );
                                    default:
                                      if (snapshot.hasError) {
                                        return Center(
                                            child: Column(
                                          children: [
                                            const Text(
                                                'Something went Wrong Please try again'),
                                            const SizedBox(
                                              height: 5,
                                            ),
                                            ElevatedButton(
                                                onPressed: () {
                                                  Navigator.push(
                                                      context,
                                                      MaterialPageRoute(
                                                          builder: (context) =>
                                                              const BottomNavBar()));
                                                },
                                                child: const Text('Try Again'))
                                          ],
                                        ));
                                      } else {
                                        return HomeCardWidget(items: items!);
                                      }
                                  }
                                }),
                          )

**第2步：**是使用Carousel.Builder而不是Carousel Simple，并将项目builder传递给它

否则它的工作原理和你在listview.builder或者gridview.builder中显示的数据一样传递上下文并根据上下文获取数据.
希望这会有帮助。

赞(0）回复(0）举报 2022-12-30

我来回答

如何在flutter carousel滑块中显示json数据

1条答案

相关问题

热门标签

最新问答