试图制作包含可重排内容项的页眉和页脚的ui。有一个名为header的属性,我们可以从中添加标题项。但是,如果我也想添加footer项目怎么办。
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(() {});
},
),
);
}
}
[如果用ReorderableListView
和Column
小部件包装Expanded
,则可以在底部添加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,
),
],
),