我希望能够通过点击列表的任何部分来重新排序列表。在颤抖中

Question

我现在正在使用 Flutter 创建一个可排序的列表。现在我可以对它进行排序，但如果不单击最右侧的按钮，我就无法移动列表。请告诉我如何解决此问题或如何通过点击列表的任何部分来更改列表的顺序。 对不起， 我正在用翻译器写英文，所以句子和单词可能有误。

List

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

void main() {
  // 最初に表示するWidget
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      // 右上に表示される"debug"ラベルを消す
      debugShowCheckedModeBanner: false,
      // アプリ名
      title: 'My Todo App',
      theme: ThemeData(
        // テーマカラー
        primarySwatch: Colors.blue,
        visualDensity: VisualDensity.adaptivePlatformDensity,
      ),
      // リスト一覧画面を表示
      home: TodoListPage(),
    );
  }
}

// リスト一覧画面用Widget
class TodoListPage extends StatefulWidget {
  @override
  _TodoListPageState createState() => _TodoListPageState();
}

class _TodoListPageState extends State<TodoListPage> {
  // Todoリストのデータ
  List<String> todoList = [];

  void reorderData(int oldindex, int newindex) {
    setState(() {
      if (newindex > oldindex) {
        newindex -= 1;
      }
      final items = todoList.removeAt(oldindex);
      todoList.insert(newindex, items);
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      // AppBarを表示し、タイトルも設定
      appBar: AppBar(
        title: Text('List list'),
      ),
      // データを元にListViewを作成
      body: ReorderableListView.builder(
        itemCount: todoList.length,
        itemBuilder: (context, index) {
          return Card(
            key: ValueKey(todoList[index]),
          child: ListTile(
                  onTap: () async {
                    // ダイアログを表示------------------------------------
                    showDialog(
                      context: context,
                      builder: (BuildContext context) {
                        return Column(
                          children: <Widget>[
                            AlertDialog(
                              content: SingleChildScrollView(
                                child: ListBody(
                                  children: <Widget>[
                                    Column(
                                      children: <Widget>[
                                        TextButton.icon(
                                          icon: const Icon(
                                            Icons.add,
                                            color: Colors.black,
                                          ),
                                          label: const Text('Edit'),
                                          onPressed: () async {
                                            var morenewText =
                                                await Navigator.of(context)
                                                    .push(
                                              MaterialPageRoute(
                                                builder: (context) =>
                                                    TodoAddPage(
                                                        todoList[index]),
                                              ),
                                            );
                                            setState(() {
                                              todoList[index] = morenewText;
                                            });
                                          },
                                        ),
                                        ElevatedButton(
                                          child: const Text('Delete'),
                                          onPressed: () {
                                            setState(() {});
                                            todoList.removeAt(index);
                                            Navigator.pop(context);
                                          },
                                          style: ElevatedButton.styleFrom(
                                            primary: Colors.blue,
                                          ),
                                        ),
                                        ElevatedButton(
                                          child: const Text('Cancel'),
                                          onPressed: () {
                                            Navigator.of(context).pop();
                                          },
                                        ),
                                      ],
                                    ),
                                  ],
                                ),
                              ),
                            ),
                          ],
                        );
                      },
                    );
                  },
                    title: Text(todoList[index]),
          ),
          );
        },
        onReorder: reorderData,
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: () async {
          // "push"で新規画面に遷移
          // リスト追加画面から渡される値を受け取る
          var newListText = await Navigator.of(context).push(
            MaterialPageRoute(builder: (context) {
              // 遷移先の画面としてリスト追加画面を指定
              return TodoAddPage(null);
            }),
          );
          if (newListText != null) {
            // キャンセルした場合は newListText が null となるので注意
            setState(() {
              // リスト追加
              todoList.add(newListText);
            });
          }
        },
        child: Icon(Icons.add),
      ),
    );
  }
}

class TodoAddPage extends StatefulWidget {
  final oldnama;
  TodoAddPage(this.oldnama);

  @override
  _TodoAddPageState createState() => _TodoAddPageState();
}

class _TodoAddPageState extends State<TodoAddPage> {
  var newname = '';

  @override
  Widget build(BuildContext context) {
    if (widget.oldnama != null) {
      newname = widget.oldnama;
    }
    return Scaffold(
      appBar: AppBar(
        title: Text('Add list'),
      ),
      body: Container(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            // 入力されたテキストを表示
            const SizedBox(height: 8),
            // テキスト入力
            TextFormField(
              //テキスト入力の初期値を決める
              initialValue: newname,
              // 入力されたテキストの値を受け取る（valueが入力されたテキスト）
              onChanged: (String value) {
                // データが変更したことを知らせる（画面を更新する）
                // データを変更
                newname = value;
              },
            ),
            const SizedBox(height: 8),
            Container(
              // 横幅いっぱいに広げる
              width: double.infinity,
              // リスト追加ボタン
              child: ElevatedButton(
                onPressed: () {
                  // "pop"で前の画面に戻る
                  // "pop"の引数から前の画面にデータを渡す
                  Navigator.of(context).pop(newname);
                },
                child: Text('Add list', style: TextStyle(color: Colors.white)),
              ),
            ),
            const SizedBox(height: 8),
            Container(
              // 横幅いっぱいに広げる
              width: double.infinity,
              // キャンセルボタン
              child: TextButton(
                // ボタンをクリックした時の処理
                onPressed: () {
                  // "pop"で前の画面に戻る
                  Navigator.of(context).pop();
                },
                child: Text('Cancel'),
              ),
            ),
          ],
        ),
      ),
    );
  }
}

Answer 1

欢迎来到 SOF。

此行为是默认设置 (https://api.flutter.dev/flutter/material/ReorderableListView-class.html)，在移动设备上您可以长按，而在桌面设备上您应该使用拖动手柄。

但是你可以使用自定义库，比如这个：https://pub.dev/packages/flutter_reorderable_list