如何在 Flutter ReorderableListView 中的 ListTiles 之间创建 space
How to create space between ListTiles in Flutter ReorderableListView
我有一个看起来像这样的 ReorderableListView :
而且我希望它在他的 ListTile 之间有 space,就像在下面的 ListView.separated 中一样:
问题是我不想使用 ListView.separated 因为你不能用它拖放 ListTiles。
找到更新解决方案:
我在下面使用 Varun 的回答将我的 ListTile 包装在一个列中,但我没有使用 SizedBox,而是使用了一个 Container 来将 space 的颜色从白色更改为我的背景颜色:
Container(
height: 5.0,
color: MyColors.myBackgroundColor
)
您可以将 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);
});
},
);
}
}
将 space 添加为不可重新排序的小部件对于 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,
),
),
],
将您的 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);
});
},
);
}
}
我有一个看起来像这样的 ReorderableListView :
而且我希望它在他的 ListTile 之间有 space,就像在下面的 ListView.separated 中一样:
问题是我不想使用 ListView.separated 因为你不能用它拖放 ListTiles。
找到更新解决方案:
我在下面使用 Varun 的回答将我的 ListTile 包装在一个列中,但我没有使用 SizedBox,而是使用了一个 Container 来将 space 的颜色从白色更改为我的背景颜色:
Container(
height: 5.0,
color: MyColors.myBackgroundColor
)
您可以将 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);
});
},
);
}
}
将 space 添加为不可重新排序的小部件对于 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,
),
),
],
将您的 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);
});
},
);
}
}