Flutter에서 ReorderableListView를 사용하는 방법은 무엇입니까?

Flutter Agency는 모바일 애플리케이션을 디자인하고 개발할 때 가장 일반적으로 사용되는 위젯에 집중했습니다. 개발자는 Flutter 위젯에 대한 기본 지식이 있는 경우 멋진 앱 구성을 시작하거나 Flutter app development company을 참조할 수 있습니다.

이 기사에서는 Flutter의 재정렬 가능한 ListView와 목록 항목을 재정렬하는 방법을 살펴보겠습니다. ReorderableListView 위젯을 사용하여 Flutter 앱에서 ListView의 항목을 재정렬할 수 있습니다.

ListView는 선형으로 정렬된 스크롤 가능한 위젯 목록입니다. 또한 자식을 하나씩 스크롤합니다. 기사에서 ListView widget에 대해 자세히 알아볼 수 있습니다.

Flutter ReorderableListView를 만드는 방법을 살펴보겠습니다. 전담Flutter mobile app developer at Flutter Agency과 이 문제를 논의할 수도 있습니다.

ReorderableListView 위젯의 생성자는 다음과 같습니다.

ReorderableListView({
 Key? key,
 required List children,
 required this.onReorder,
 this.itemExtent,
 this.prototypeItem,
 this.proxyDecorator,
 this.buildDefaultDragHandles = true,
 this.padding,
 this.header,
 this.scrollDirection = Axis.vertical,
 this.reverse = false,
 this.scrollController,
 this.primary,
 this.physics,
 this.shrinkWrap = false,
 this.anchor = 0.0,
 this.cacheExtent,
 this.dragStartBehavior = DragStartBehavior.start,
 this.keyboardDismissBehavior = ScrollViewKeyboardDismissBehavior.manual,
 this.restorationId,
 this.clipBehavior = Clip.hardEdge,
})

Flutter의 ReorderableListView 위젯을 사용하면 드래그 앤 드롭으로 재배치 및 재정렬할 수 있는 요소로 목록 보기를 구성할 수 있습니다.

Flutter ReorderableListView를 만드는 방법을 살펴보겠습니다.

**1단계: **먼저 Flutter 프로젝트를 만듭니다.

2단계: 다음으로 목록을 만듭니다. 결과적으로 문자열 목록을 만들 것입니다.

List dataList = ["Data1", "Data2", "Data3", "Data4", "Data5", "Data6", "Data7", "Data8"];

3단계: ReorderableListView() 위젯과 키를 ReorderableListView 위젯의 자식에 삽입합니다. 키는 항목을 이동한 후 구분할 수 있어야 합니다.

ReorderableListView(
children: [], 
onReorder: (a,b){}
),

4단계: 재정렬 기능을 포함합니다. 목록은 콜백 함수를 사용하여 목록 항목이 목록의 새 위치로 드래그되었고 항목의 순서가 업데이트되어야 함을 애플리케이션에 알립니다.

onReorder: (a, b) {}
Let’s see a full example of ReorderableListView().

import 'package:flutter/material.dart';
void main() {
  runApp(const MyApp());
}
class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);
  @override
  Widget build(BuildContext context) {
    return const MaterialApp(
      home: MyHomePage(),
    );
  }
}
class MyHomePage extends StatefulWidget {
  const MyHomePage({Key? key}) : super(key: key);
  @override
  State createState() => _MyHomePageState();
}
class _MyHomePageState extends State with TickerProviderStateMixin {
  final List dataList = [
    "Data1",
    "Data2",
    "Data3",
    "Data4",
    "Data5",
    "Data6",
    "Data7",
    "Data8",
    "Data9",
    "Data10"
  ];
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Reorderable ListView'),
      ),
      body: ReorderableListView.builder(
          itemCount: dataList.length,
          itemBuilder: (context, index) {
            final String productName = dataList[index];
            return Card(
              key: ValueKey(productName),
              color: Colors.green,
              elevation: 1,
              margin: const EdgeInsets.all(5),
              child: ListTile(
                contentPadding: const EdgeInsets.all(5),
                title: Text(
                  productName,
                  style: const TextStyle(fontSize: 18),
                ),
              ),
            );
          },
          onReorder: (oldIndex, newIndex) {
            setState(() {
              if (newIndex > oldIndex) {
                newIndex = newIndex - 1;
              }
              final element = dataList.removeAt(oldIndex);
              dataList.insert(newIndex, element);
            });
          }),
    );
  }
}

위의 코드를 컴파일하고 실행하여 실제 장치 또는 Android 에뮬레이터가 필요하려면 how to set up an emulator for VSCode에 대한 기사를 읽고 Android 에뮬레이터를 쉽게 설정하십시오.

코드를 실행한 후 항목을 길게 눌러 항목 위치를 확인할 수 있습니다.

산출



결론
이 기사에서는 ReorderableListView의 기본 데모를 설명했습니다. 필요에 맞게 이 코드를 업데이트할 수 있으며 지금까지 ReorderableListView에 대한 간략한 소개였습니다.