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

8yparm6h  于 2023-07-31  发布在  Flutter
关注(0)|答案(4)|浏览(147)

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


的数据
我想它有空间之间的ListTile像在ListView.separated下面：


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

找到更新方案：

我使用Varun的答案将ListTile Package 在Column中，但我没有使用SizedBox，而是使用Container来将空间的颜色从白色更改为我的背景色：

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

字符串

dart

4条答案

按热度按时间
rekjcdws

rekjcdws1#

将ListTile Package 在列中，并使用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);
        });
      },
    );
  }
}

字符串

赞(0）分享  回复(0）举报  2023-07-31
zaqlnxep

zaqlnxep2#

你可以在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中添加空间作为不可重新排序的小部件似乎是不可能的，即使使用AbsorbPointer在ListTiles中添加虚拟项，仍然可以使它们重新排序。所以上面的方法至少是可行的

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,
              ),
            ),
      ],

型

赞(0）分享  回复(0）举报  2023-07-31
bnlyeluc

bnlyeluc3#

它的工作原理类似于ViewList.separated和ReorderableList的混合体

import 'dart:math';

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

class CustomReorderableListView extends ReorderableListView {
  CustomReorderableListView.separated({
    Key? key,
    required IndexedWidgetBuilder itemBuilder,
    required IndexedWidgetBuilder separatorBuilder,
    required int itemCount,
    required ReorderCallback onReorder,
    double? itemExtent,
    Widget? prototypeItem,
    ReorderItemProxyDecorator? proxyDecorator,
    bool buildDefaultDragHandles = true,
    EdgeInsets? padding,
    Widget? header,
    Axis scrollDirection = Axis.vertical,
    bool reverse = false,
    ScrollController? scrollController,
    bool? primary,
    ScrollPhysics? physics,
    bool shrinkWrap = false,
    double anchor = 0.0,
    double? cacheExtent,
    DragStartBehavior dragStartBehavior = DragStartBehavior.start,
    ScrollViewKeyboardDismissBehavior keyboardDismissBehavior =
        ScrollViewKeyboardDismissBehavior.manual,
    String? restorationId,
    Clip clipBehavior = Clip.hardEdge,
  }) : super.builder(
    key: key,
    itemCount: max(0, itemCount * 2 - 1),
    itemBuilder: (BuildContext context, int index) {
      if (index % 2 == 1) {
        final separator = separatorBuilder.call(context, index);

        if (separator.key == null) {
          return KeyedSubtree(
            key: ValueKey('ReorderableSeparator${index}Key'),
            child: IgnorePointer(child: separator),
          );
        }

        return separator;
      }

      return itemBuilder.call(context, index ~/ 2);
    },
    onReorder: (int oldIndex, int newIndex) {
      if (oldIndex < newIndex) {
        newIndex -= 1;
      }

      if (oldIndex % 2 == 1) {
        //separator - should never happen
        return;
      }

      if ((oldIndex - newIndex).abs() == 1) {
        //moved behind the top/bottom separator
        return;
      }

      newIndex = oldIndex > newIndex && newIndex % 2 == 1
          ? (newIndex + 1) ~/ 2
          : newIndex ~/ 2;
      oldIndex = oldIndex ~/ 2;
      onReorder.call(oldIndex, newIndex);
    },
    itemExtent: itemExtent,
    prototypeItem: prototypeItem,
    proxyDecorator: proxyDecorator,
    buildDefaultDragHandles: buildDefaultDragHandles,
    padding: padding,
    header: header,
    scrollDirection: scrollDirection,
    reverse: reverse,
    scrollController: scrollController,
    primary: primary,
    physics: physics,
    shrinkWrap: shrinkWrap,
    anchor: anchor,
    cacheExtent: cacheExtent,
    dragStartBehavior: dragStartBehavior,
    keyboardDismissBehavior: keyboardDismissBehavior,
    restorationId: restorationId,
    clipBehavior: clipBehavior,
  );
}
    
                if ((oldIndex - newIndex).abs() == 1) {
                  return;
                }
    
                if (oldIndex > newIndex && newIndex % 2 == 1) {
                  newIndex = (newIndex + 1) ~/ 2;
                } else if (oldIndex > newIndex && newIndex % 2 != 1) {
                  newIndex = (newIndex) ~/ 2;
                } else if (newIndex == 0) {
                  newIndex = (newIndex ~/ 2);
                } else {
                  newIndex = (newIndex ~/ 2) + 1;
                }
                oldIndex = oldIndex ~/ 2;
                onReorder.call(oldIndex, newIndex);
              },
              itemExtent: itemExtent,
              prototypeItem: prototypeItem,
              proxyDecorator: proxyDecorator,
              buildDefaultDragHandles: buildDefaultDragHandles,
              padding: padding,
              header: header,
              scrollDirection: scrollDirection,
              reverse: reverse,
              scrollController: scrollController,
              primary: primary,
              physics: physics,
              shrinkWrap: shrinkWrap,
              anchor: anchor,
              cacheExtent: cacheExtent,
              dragStartBehavior: dragStartBehavior,
              keyboardDismissBehavior: keyboardDismissBehavior,
              restorationId: restorationId,
              clipBehavior: clipBehavior,
            );
    }

字符串

赞(0）分享  回复(0）举报  2023-07-31
wbrvyc0a

wbrvyc0a4#

现在我们可以添加底部间距来实现这一点。

ReorderableListView.builder(
  padding: const EdgeInsets.all(AppSpace.md),
  itemBuilder: (_, index) {
    List<dynamic> item = _listData[index];
    return Container(
      key: ValueKey('${item[1]}'),
      margin: EdgeInsets.only(bottom: AppSpace.sm),
      child: Text(''),
    );
  },
  itemCount: _listData.length,
  buildDefaultDragHandles: false,
  onReorder: (oldIndex, newIndex) {
    if (oldIndex < newIndex) newIndex -= 1;
    final List<dynamic> item = _listData.removeAt(oldIndex);
    _listData.insert(newIndex, item);
    setState(() {});
  },
  proxyDecorator: _customProxyDecorator,
);

字符串
选项之间的间距

margin: EdgeInsets.only(bottom: AppSpace.sm),

型
使用自定义拖动装饰消除默认背景颜色和阴影。

proxyDecorator: _customProxyDecorator,

型
默认装饰

Widget _proxyDecorator(Widget child, int index, Animation<double> animation) {
return AnimatedBuilder(
  animation: animation,
  builder: (BuildContext context, Widget? child) {
    final double animValue = Curves.easeInOut.transform(animation.value);
    final double elevation = lerpDouble(0, 6, animValue)!;
    return Material(
      elevation: elevation,
      child: child,
    );
  },
  child: child,
);
  }

型
一个简单的自定义小部件

Widget _proxyDecorator(Widget child, int index, Animation<double> animation) {
    return child;
  }

型
最终结果enter image description here不拖动时

赞(0）分享  回复(0）举报  2023-07-31
我来回答

相关问题

    查看更多

    热门标签

    更多
    JavaquerypythonNode开发语言requestUtil数据库Table后端算法LoggerMessageElementParser

    最新问答

    更多
    • 蜀ICP备13028337号-1 大数据知识库 https://www.saoniuhuo.com © All rights reserved
    • 本站内容来源互联网,如果侵犯您的权益请联系我们删除, 联系方式：448109455@qq.com