Flutter可重排序轮播图插件reorderable_carousel的使用

re-orderable_carousel

一个允许你在轮播图中重新排序、添加或删除项目的轮播组件。

使用步骤

安装

在你的 Flutter 项目中，将插件添加到依赖项中：

dependencies:
    reorderable_carousel: ^0.4.0+1

使用示例

现在你可以在任何地方使用轮播图组件。需要注意的是，你至少需要有一个项目。

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

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatefulWidget {
  [@override](/user/override)
  State<StatefulWidget> createState() {
    return MyHomePageState();
  }
}

class MyHomePageState extends State<MyHomePage> {
  late List<Color> colors;

  late Color selectedColor;
  late int selectedIdx;

  [@override](/user/override)
  void initState() {
    super.initState();
    colors = [
      Color((Random().nextDouble() * 0xFFFFFF).toInt()).withOpacity(1.0)
    ];
    selectedIdx = 0;
    selectedColor = colors[selectedIdx];
  }

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("设备布局"),
      ),
      body: Column(
        mainAxisAlignment: MainAxisAlignment.start,
        children: [
          AnimatedContainer(
            duration: const Duration(milliseconds: 250),
            width: MediaQuery.of(context).size.width / 3,
            height: MediaQuery.of(context).size.height * .6,
            color: selectedColor,
          ),
          SizedBox(
            height: MediaQuery.of(context).size.height * .25,
            child: Padding(
              padding: const EdgeInsets.symmetric(horizontal: 8.0),
              child: ReorderableCarousel(
                maxNumberItems: 10,
                numItems: colors.length,
                addItemAt: (index) {
                  setState(() {
                    colors.insert(
                        index,
                        Color((Random().nextDouble() * 0xFFFFFF).toInt())
                            .withOpacity(1.0));
                  });
                },
                itemBuilder: (boxSize, index, isSelected) {
                  return Column(
                    children: [
                      Expanded(
                        child: Padding(
                          padding: const EdgeInsets.all(8.0),
                          child: AnimatedContainer(
                            key: ValueKey(colors[index]),
                            duration: const Duration(milliseconds: 250),
                            height: 150,
                            width: boxSize,
                            decoration: BoxDecoration(
                              border: isSelected
                                  ? Border.all(color: Colors.amber, width: 10.0)
                                  : null,
                              color: colors[index],
                            ),
                          ),
                        ),
                      ),
                      Icon(Icons.ac_unit),
                    ],
                  );
                },
                onReorder: (oldIndex, newIndex) {
                  setState(() {
                    Color swap = colors.removeAt(oldIndex);
                    colors.insert(newIndex, swap);
                  });
                },
                onItemSelected: (int selectedIndex) {
                  setState(() {
                    selectedColor = colors[selectedIndex];
                  });
                },
                draggedItemBuilder: (itemWidth, index) {
                  return AnimatedContainer(
                    key: ValueKey(colors[index]),
                    duration: const Duration(milliseconds: 250),
                    height: 150,
                    width: itemWidth,
                    decoration: BoxDecoration(
                      border: Border.all(color: Colors.amber, width: 10.0),
                      color: colors[index],
                    ),
                  );
                },
              ),
            ),
          )
        ],
      ),
    );
  }
}

更多关于Flutter可重排序轮播图插件reorderable_carousel的使用的实战教程也可以访问 https://www.itying.com/category-92-b0.html

sinazl 1楼

更多关于Flutter可重排序轮播图插件reorderable_carousel的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html

reorderable_carousel 是一个用于 Flutter 的插件，它允许你创建一个可以重新排序的轮播图。通过这个插件，用户可以拖动轮播图中的项目来改变它们的顺序。以下是如何使用 reorderable_carousel 插件的基本步骤：

1. 添加依赖

首先，你需要在 pubspec.yaml 文件中添加 reorderable_carousel 依赖：

dependencies:
  flutter:
    sdk: flutter
  reorderable_carousel: ^0.0.3  # 请检查最新版本

然后运行 flutter pub get 来安装依赖。

2. 导入包

在你的 Dart 文件中导入 reorderable_carousel 包：

import 'package:reorderable_carousel/reorderable_carousel.dart';

3. 使用 ReorderableCarousel

你可以使用 ReorderableCarousel 组件来创建一个可重排序的轮播图。以下是一个简单的示例：

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

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

class MyApp extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('Reorderable Carousel Example'),
        ),
        body: ReorderableCarouselExample(),
      ),
    );
  }
}

class ReorderableCarouselExample extends StatefulWidget {
  [@override](/user/override)
  _ReorderableCarouselExampleState createState() =>
      _ReorderableCarouselExampleState();
}

class _ReorderableCarouselExampleState extends State<ReorderableCarouselExample> {
  List<String> items = ['Item 1', 'Item 2', 'Item 3', 'Item 4', 'Item 5'];

  [@override](/user/override)
  Widget build(BuildContext context) {
    return ReorderableCarousel(
      onReorder: (oldIndex, newIndex) {
        setState(() {
          final item = items.removeAt(oldIndex);
          items.insert(newIndex, item);
        });
      },
      children: items
          .map((item) => Card(
                child: Center(child: Text(item)),
              ))
          .toList(),
    );
  }
}