问题描述
如何将 listview 转换为 reorderedableListview 以制作优先任务应用程序
这是我的应用程序设计输出
这是初始化状态代码
class _TodoListScreenState extends State<TodoListScreen> {
late List<Task> taskList = [];
@override
void initState() {
super.initState();
_updateTaskList();
}
_updateTaskList() async {
print('--------->update');
this.taskList = await DatabaseHelper.instance.getTaskList();
print(taskList);
setState(() {});
}
这是创建listtile的方法
Widget _buildTask(Task task) {
return Column(
children: [
Padding(
padding: const EdgeInsets.symmetric(horizontal: 25.0),child: ListTile(
title: Text(
task.title!,style: TextStyle(
fontSize: 18.0,decoration: task.status == 0
? Textdecoration.none
: Textdecoration.lineThrough,),subtitle: Text(
'${DateFormat.yMMMEd().format(task.date!)} • ${task.priority}',trailing: CheckBox(
onChanged: (value) {
task.status = value! ? 1 : 0;
DatabaseHelper.instance.updateTask(task);
_updateTaskList();
},value: task.status == 1 ? true : false,activeColor: Theme.of(context).primaryColor,onTap: () => Navigator.push(
context,MaterialPageRoute(
builder: (context) => AddTask(
task: task,updateTaskList: () {
_updateTaskList();
},Divider(),],);
}
这是方法构建
@override
Widget build(BuildContext context) {
return Scaffold(
floatingActionButton: FloatingActionButton(
child: Icon(Icons.add),backgroundColor: Theme.of(context).primaryColor,onpressed: () => Navigator.push(
context,MaterialPageRoute(
builder: (context) => AddTask(updateTaskList: _updateTaskList),
body: ListView.builder(
padding: EdgeInsets.symmetric(vertical: 80.0),itemCount: taskList.length + 1,itemBuilder: (BuildContext context,int index) {
if (index == 0) {
return Padding(
padding:
const EdgeInsets.symmetric(horizontal: 40.0,vertical: 20.0),child: Column(
crossAxisAlignment: CrossAxisAlignment.start,children: [
Text(
"My Tasks",style: TextStyle(
fontWeight: FontWeight.bold,fontSize: 40.0,color: Colors.black),SizedBox(height: 15.0),Text(
'${taskList.length} of ${taskList.where((Task task) => task.status == 1).toList().length} task complete ',style: TextStyle(
fontWeight: FontWeight.w600,fontSize: 20.0,color: Colors.grey,);
} else {
return _buildTask(taskList[index - 1]);
}
},);
}
}
这是我想要更改的完整代码
解决方法
您可以使用 ReorderableListView 之类的小部件和 Reorderables 之类的库。
更新
示例代码:
import 'dart:math';
import 'package:flutter/material.dart';
import 'package:reorderables/reorderables.dart';
class ReorderablesImagesPage extends StatefulWidget {
ReorderablesImagesPage({
Key key,this.title,@required this.size,}) : super(key: key);
final String title;
final double size;
@override
State<StatefulWidget> createState() => _ReorderablesImagesPageState();
}
class _ReorderablesImagesPageState extends State<ReorderablesImagesPage> {
List<Widget> _tiles;
int maxImageCount = 30;
double iconSize;
final int itemCount = 3;
final double spacing = 8.0;
final double runSpacing = 8.0;
final double padding = 8.0;
@override
void initState() {
super.initState();
iconSize = ((widget.size - (itemCount - 1) * spacing - 2 * padding) / 3)
.floor()
.toDouble();
_tiles = <Widget>[
Container(
child: Image.network('https://picsum.photos/250?random=1'),width: iconSize,height: iconSize,),Container(
child: Image.network('https://picsum.photos/250?random=2'),Container(
child: Image.network('https://picsum.photos/250?random=3'),Container(
child: Image.network('https://picsum.photos/250?random=4'),Container(
child: Image.network('https://picsum.photos/250?random=5'),Container(
child: Image.network('https://picsum.photos/250?random=6'),Container(
child: Image.network('https://picsum.photos/250?random=7'),Container(
child: Image.network('https://picsum.photos/250?random=8'),Container(
child: Image.network('https://picsum.photos/250?random=9'),];
}
@override
Widget build(BuildContext context) {
void _onReorder(int oldIndex,int newIndex) {
setState(() {
Widget row = _tiles.removeAt(oldIndex);
_tiles.insert(newIndex,row);
});
}
var wrap = ReorderableWrap(
minMainAxisCount: itemCount,maxMainAxisCount: itemCount,spacing: spacing,runSpacing: runSpacing,padding: EdgeInsets.all(padding),children: _tiles,onReorder: _onReorder,onNoReorder: (int index) {
//this callback is optional
debugPrint(
'${DateTime.now().toString().substring(5,22)} reorder cancelled. index:$index');
},onReorderStarted: (int index) {
//this callback is optional
debugPrint(
'${DateTime.now().toString().substring(5,22)} reorder started: index:$index');
});
var column = Column(
crossAxisAlignment: CrossAxisAlignment.start,children: <Widget>[
Expanded(
child: SingleChildScrollView(
child: wrap,ButtonBar(
buttonPadding: EdgeInsets.all(16),alignment: MainAxisAlignment.end,children: <Widget>[
if (_tiles.length > 0)
IconButton(
iconSize: 50,icon: Icon(Icons.remove_circle),color: Colors.teal,padding: const EdgeInsets.all(0.0),onPressed: () {
setState(() {
_tiles.removeAt(0);
});
},if (_tiles.length < maxImageCount)
IconButton(
iconSize: 50,icon: Icon(Icons.add_circle),color: Colors.deepOrange,onPressed: () {
var rand = Random();
var newTile = Container(
child: Image.network(
'https://picsum.photos/250?random=${rand.nextInt(100)}'),);
setState(() {
_tiles.add(newTile);
});
},],);
return Scaffold(
appBar: AppBar(
title: Text(widget.title),body: column,);
}
}