我试图做一个列表视图。我想删除每一行和滑动(dispossible小部件)。在解散之前,我想使用一个警报框。另外还有一个问题,那就是我希望备用列表有方形和圆形图像。但它不是以正确的方式工作。
import 'package:flutter/material.dart';
import 'package:google_fonts/google_fonts.dart';
import 'package:sample/signin.dart';
class HomePage extends StatefulWidget {
const HomePage({Key? key}) : super(key: key);
@override
State<HomePage> createState() => _HomePageState();
}
class _HomePageState extends State<HomePage> {
List<int> items = List<int>.generate(20, (int index) => index);
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
automaticallyImplyLeading: false,
title: Text(
"Home Page",
style: GoogleFonts.ubuntuCondensed(fontWeight: FontWeight.bold),
),
actions: [
IconButton(
onPressed: () {
showAlertDialog(context);
},
icon: const Icon(Icons.logout),
),
],
),
body: SafeArea(
child: ListView.builder(
itemCount: items.length,
itemBuilder: (context, index) {
return Dismissible(
direction: DismissDirection.vertical,
background: Container(
color: Colors.red,
child: Icon(Icons.delete),
),
key: ValueKey<int>(items[index]),
onDismissed: (direction) {
setState(() {
items.removeAt(index);
});
},
child: ListViewWidget(
index: index,
),
);
},
),
),
);
}
}
class ListViewWidget extends StatefulWidget {
final index;
const ListViewWidget({
super.key,
this.index,
});
@override
State<ListViewWidget> createState() => _ListViewWidgetState();
}
class _ListViewWidgetState extends State<ListViewWidget> {
@override
Widget build(BuildContext context) {
return Padding(
padding: EdgeInsets.all(8.0),
child: ListTile(
leading: (widget.index % 2 == 0)
? Image.network(
'https://upload.wikimedia.org/wikipedia/commons/9/9e/Placeholder_Person.jpg',
height: 50,
width: 50,
)
: CircleAvatar(
radius: 25,
backgroundImage: NetworkImage(
'https://cdn3.iconfinder.com/data/icons/business-vol-26/100/Artboard_2-512.png',
),
),
title: Text(
" Person ${widget.index + 1}",
style: GoogleFonts.ubuntu(fontWeight: FontWeight.bold),
),
trailing: IconButton(
icon: Icon(Icons.delete),
onPressed: () {},
),
),
);
}
}
showAlertDialog(BuildContext ctx) {
// set up the buttons
Widget logoutButton = TextButton(
style: TextButton.styleFrom(backgroundColor: Colors.red),
child: const Text(
"Log Out",
style: TextStyle(color: Colors.white),
),
onPressed: () {
Navigator.of(ctx).push(MaterialPageRoute(
builder: (ctx) => const SignInPage(),
));
},
);
Widget continueButton = TextButton(
child: const Text(
"Cancel",
style: TextStyle(color: Colors.deepPurple),
),
onPressed: () {
Navigator.pop(ctx);
},
);
// the AlertDialog
AlertDialog alert = AlertDialog(
title: Text(
"Warning",
style:
GoogleFonts.openSans(color: Colors.red, fontWeight: FontWeight.bold),
),
content: Text(
"Would you like to continue or Logout",
style:
GoogleFonts.archivo(color: Colors.black, fontStyle: FontStyle.italic),
),
actions: [
continueButton,
logoutButton,
],
);
// show the dialog
showDialog(
context: ctx,
builder: (BuildContext ctx) {
return alert;
},
);
}
/* Delete Alert box */
// showDeleteAlertBox(BuildContext ctx) {
// // set up the buttons
// Widget deleteButton = TextButton(
// style: TextButton.styleFrom(backgroundColor: Colors.red),
// child: const Text(
// "Delete",
// style: TextStyle(color: Colors.white),
// ),
// onPressed: () {},
// );
// Widget continueButton = TextButton(
// child: const Text(
// "Cancel",
// style: TextStyle(color: Colors.deepPurple),
// ),
// onPressed: () {
// Navigator.pop(ctx);
// },
// );
// // the AlertDialog
// AlertDialog alert = AlertDialog(
// title: Text(
// "Warning",
// style:
// GoogleFonts.openSans(color: Colors.red, fontWeight: FontWeight.bold),
// ),
// content: Text(
// "Do you want to delete the item",
// style:
// GoogleFonts.archivo(color: Colors.black, fontStyle: FontStyle.italic),
// ),
// actions: [
// continueButton,
// deleteButton ,
// ],
// );
// // show the dialog
// showDialog(
// context: ctx,
// builder: (BuildContext ctx) {
// return alert;
// },
// );
// }
字符串
请回复任何东西,并建议任何更新,如果我有任何问题。
2条答案
按热度按时间6fe3ivhb1#
显示一个警报显示它在
onDismissed(_){}
的圆形头像尝试 Package 一个小部件与cliprrect
和给予borederradius
。字符串
vxqlmq5t2#
在onDismissed上调用此方法,传递上下文和索引:
字符串