Flutter ReorderableListView中如何在ListTiles之间创建空间

Question

我有一个 ReorderableListView，看起来像这样：

我希望它在他的 ListTile 之间有空间，就像下面的 ListView.separated 一样：

问题是我不想使用 ListView.separated 因为你不能用它拖放 ListTiles。

找到更新解决方案：

我在下面使用 Varun 的回答将我的 ListTile 包装在一个 Column 中，但我没有使用 SizedBox，而是使用了一个 Container 能够将空间的颜色从白色更改为我的背景颜色：

Container(
          height: 5.0,
          color: MyColors.myBackgroundColor
        )

Answer 1

将您的 ListTile 包装在一个列中，并使用 SizedBox 分隔列表项。在列中使用键，而不是在 ListTile 中。

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  static const String _title = 'Flutter Code Sample';

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: _title,
      home: Scaffold(
        appBar: AppBar(title: const Text(_title)),
        body: const MyStatefulWidget(),
      ),
    );
  }
}

class MyStatefulWidget extends StatefulWidget {
  const MyStatefulWidget({Key? key}) : super(key: key);

  @override
  State<MyStatefulWidget> createState() => _MyStatefulWidgetState();
}

class _MyStatefulWidgetState extends State<MyStatefulWidget> {
  final List<int> _items = List<int>.generate(50, (int index) => index);

  @override
  Widget build(BuildContext context) {
    final ColorScheme colorScheme = Theme.of(context).colorScheme;
    final Color oddItemColor = colorScheme.primary.withOpacity(0.05);
    final Color evenItemColor = colorScheme.primary.withOpacity(0.15);

    return ReorderableListView(
      padding: const EdgeInsets.symmetric(horizontal: 40),
      children: <Widget>[
        for (int index = 0; index < _items.length; index++)
          Column(
            key: Key('$index'),
            children: [
              ListTile(
                tileColor: _items[index].isOdd ? oddItemColor : evenItemColor,
                title: Text('Item ${_items[index]}'),
              ),
              SizedBox(
                height: 5,
              ),
            ],
          ),
      ],
      onReorder: (int oldIndex, int newIndex) {
        setState(() {
          if (oldIndex < newIndex) {
            newIndex -= 1;
          }
          final int item = _items.removeAt(oldIndex);
          _items.insert(newIndex, item);
        });
      },
    );
  }
}

Answer 2

您可以只用底部的填充将 listTile 包装为“分隔符”，这可能并不理想，因为填充将是小部件的一部分，在拖动时会可见。

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  static const String _title = 'Flutter Code Sample';

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: _title,
      home: Scaffold(
        appBar: AppBar(title: const Text(_title)),
        body: const MyStatefulWidget(),
      ),
    );
  }
}

class MyStatefulWidget extends StatefulWidget {
  const MyStatefulWidget({Key? key}) : super(key: key);

  @override
  State<MyStatefulWidget> createState() => _MyStatefulWidgetState();
}

class _MyStatefulWidgetState extends State<MyStatefulWidget> {
  final List<int> _items = List<int>.generate(50, (int index) => index);

  @override
  Widget build(BuildContext context) {
    final ColorScheme colorScheme = Theme.of(context).colorScheme;
    final Color oddItemColor = colorScheme.primary.withOpacity(0.05);
    final Color evenItemColor = colorScheme.primary.withOpacity(0.15);

    return ReorderableListView(
      padding: const EdgeInsets.symmetric(horizontal: 40),
      children: <Widget>[
        for (int index = 0; index < _items.length; index++)
          Padding(
              key: Key('$index'),
              padding: const EdgeInsets.only(bottom: 4),
              child: ListTile(
                tileColor: _items[index].isOdd ? oddItemColor : evenItemColor,
                title: Text('Item ${_items[index]}'),
              )),
      ],
      onReorder: (int oldIndex, int newIndex) {
        setState(() {
          if (oldIndex < newIndex) {
            newIndex -= 1;
          }
          final int item = _items.removeAt(oldIndex);
          _items.insert(newIndex, item);
        });
      },
    );
  }
}

使用 ReorderableListView 似乎无法将空间添加为不可重新排序的小部件，即使添加将 ListTiles 与 AbsorbPointer 交错的虚拟项目仍然会使它们可重新排序。所以上面的方法至少是可行的

      children: <Widget>[
        for (int index = 0; index < _items.length; index++)
          if (index.isOdd)
            ListTile(
              key: Key('$index'),
              tileColor: _items[index].isOdd ? oddItemColor : evenItemColor,
              title: Text('Item ${_items[index]}'),
            )
          else if (index.isEven)
            AbsorbPointer(
              key: Key('$index'),
              child: SizedBox.square(
                key: Key('$index'),
                dimension: 40,
              ),
            ),
      ],