[英]How to add footer to ReorderableListView in flutter
Trying to make a ui that contains Header and Footer with rearrangeable content items.试图制作一个包含可重新排列的内容项的页眉和页脚的 ui。 There is a property called header from which we can add header item.
有一个名为header的属性,我们可以从中添加标题项。 But what to do if I want to add footer item as well.
但是如果我还想添加页脚项目该怎么办。
import 'package:flutter/material.dart';
class MyStickyHeader extends StatefulWidget {
@override
State<StatefulWidget> createState() {
return _MyStickyHeaderState();
}
}
class _MyStickyHeaderState extends State<MyStickyHeader> {
List<Widget> _list = [
Text("Apple"),
Text("Ball"),
Text("Cat"),
Text("Dog"),
Text("Elephant")
];
@override
Widget build(BuildContext context) {
return Container(
margin: EdgeInsets.only(top: 30, left: 10),
color: Colors.white,
child: showData(),
);
}
Widget showData() {
return Container(
child: ReorderableListView(
header: Container(
height: 100,
color: Colors.red,
),
children: _list
.map((item) => Container(
padding: EdgeInsets.all(10),
key: Key("${(item as Text).data}"),
child: Row(
children: <Widget>[
Icon(Icons.ac_unit),
Expanded(
child: item,
)
],
),
))
.toList(),
onReorder: (int start, int current) {
// dragging from top to bottom
if (start < current) {
int end = current - 1;
Widget startItem = _list[start];
int i = 0;
int local = start;
do {
_list[local] = _list[++local];
i++;
} while (i < end - start);
_list[end] = startItem;
}
// dragging from bottom to top
if (start > current) {
Widget startItem = _list[start];
for (int i = start; i > current; i--) {
_list[i] = _list[i - 1];
}
_list[current] = startItem;
}
setState(() {});
},
),
);
}
}
Last element of your list can be a footer.列表的最后一个元素可以是页脚。 It has to be a widget with onLongPress property.
它必须是具有 onLongPress 属性的小部件。 For example:
例如:
ReorderableListView(
onReorder: (int oldIndex, int newIndex) {},
children: List.generate(someList.items.length + 1, (index) {
if (index < someList.items.length)
return ListTile(
key: Key(someList.items[index].description),
);
else
return RaisedButton(key: Key('footer'), onPressed: () {}, onLongPress: (){}, child: Text('Button'));
})),
If you wrap your ReorderableListView
with a Column
and an Expanded
widget, you can add a Container
at the bottom to act as a footer:如果你用一个
Column
和一个Expanded
小部件包装你的ReorderableListView
,你可以在底部添加一个Container
作为页脚:
Column(
children: <Widget>[
Expanded(
child: ReorderableListView(
header: Container(
height: 100,
color: Colors.red,
),
children: _list
.map((item) => Container(
padding: EdgeInsets.all(10),
key: Key("${(item as Text).data}"),
child: Row(
children: <Widget>[
Icon(Icons.ac_unit),
Expanded(
child: item,
)
],
),
)).toList(),
onReorder: (int start, int current) {
// dragging from top to bottom
if (start < current) {
int end = current - 1;
Widget startItem = _list[start];
int i = 0;
int local = start;
do {
_list[local] = _list[++local];
i++;
} while (i < end - start);
_list[end] = startItem;
}
// dragging from bottom to top
if (start > current) {
Widget startItem = _list[start];
for (int i = start; i > current; i--) {
_list[i] = _list[i - 1];
}
_list[current] = startItem;
}
setState(() {});
},
),
),
Container(
height: 40,
alignment: Alignment.center,
child: Text('Footer'),
color: Colors.orange,
),
],
),
To implement such view i recommend using Slivers .为了实现这样的视图,我建议使用Slivers 。
benefits :好处:
check the code below:检查下面的代码:
import 'package:flutter/material.dart';
class MyHomePage extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
body: CustomScrollView(
slivers: [
SliverList(
delegate: SliverChildListDelegate(
[
Container(
width: double.infinity,
height: 50,
color: Colors.orangeAccent,
child: Center(
child: Text(
'Header',
style: TextStyle(color: Colors.white, letterSpacing:4),
),
),
),
ListView.builder(
shrinkWrap: true,
itemCount: 100,
itemBuilder: (BuildContext context, int index) {
return ListTile(
title: Center(child: Text('$index')),
);
},
),
],
),
),
SliverFillRemaining(
hasScrollBody: false,
child: Align(
alignment: Alignment.bottomCenter,
child: Container(
width: double.infinity,
height: 50,
color: Colors.blueAccent,
child: Center(
child: Text(
'Footer',
style: TextStyle(color: Colors.white, letterSpacing: 4),
),
),
),
),
)
],
),
);
}
}
For more detail take a look here:有关更多详细信息,请查看此处:
https://itnext.io/create-a-header-footer-with-scrollable-body-view-in-flutter-5551087270de https://itnext.io/create-a-header-footer-with-scrollable-body-view-in-flutter-5551087270de
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.