[英]Select Card() which contains ListTile() in Flutter
我们可以有一个可选ListTile()
就像ChoiceChip()
我希望包含 ListTile 的 Card() 是可选的。
这是卡片的图像:
这是一张卡片的代码:
Container(
width: 98.0,
child: Card(
child: ListTile(
title: Row(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Text(
'Flat No',
style: TextStyle(
fontWeight: FontWeight.bold,
),
),
],
),
subtitle: Row(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Text(
'102',
style: TextStyle(
color: Colors.black,
fontSize: 15.0,
fontWeight: FontWeight.bold,
),
),
],
),
),
),
),
只需将ChoiceChip
与Column
ChoiceChip
使用。
此处演示: DartPad
尝试这个,
import 'package:flutter/material.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
home: MyHomePage(),
);
}
}
class MyHomePage extends StatefulWidget {
@override
_MyHomePageState createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
final flatRoomList = List.generate(50, (i) => i + 1);
final selectedFlatRooms = <int>{};
final alreadyReservedRooms = <int>{2, 4, 23, 7, 13, 39};
@override
Widget build(BuildContext context) {
return Scaffold(
body: Padding(
padding: const EdgeInsets.all(8.0),
child: GridView.builder(
gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
crossAxisCount: 3,
crossAxisSpacing: 10.0,
mainAxisSpacing: 10.0,
),
itemCount: flatRoomList.length,
itemBuilder: (context, index) {
final roomNo = flatRoomList[index];
return MyChoiceChip(
flatNo: roomNo.toString(),
selected: selectedFlatRooms.contains(roomNo),
onSelected: alreadyReservedRooms.contains(roomNo)
? null
: (isSelected) {
setState(() {
if (isSelected)
selectedFlatRooms.add(roomNo);
else
selectedFlatRooms.remove(roomNo);
});
},
);
},
),
),
);
}
}
class MyChoiceChip extends StatelessWidget {
final String flatNo;
final bool selected;
final ValueChanged<bool> onSelected;
const MyChoiceChip({
Key key,
@required this.flatNo,
@required this.selected,
this.onSelected,
}) : assert(flatNo != null),
assert(selected != null),
super(key: key);
@override
Widget build(BuildContext context) {
return ChoiceChip(
elevation: 5.0,
backgroundColor: Colors.green[50],
disabledColor: Colors.red[300],
padding: const EdgeInsets.symmetric(horizontal: 20.0, vertical: 10.0),
label: Center(
child: Column(
mainAxisSize: MainAxisSize.min,
crossAxisAlignment: CrossAxisAlignment.center,
children: <Widget>[
Text(
"Flat No",
style: const TextStyle(
fontWeight: FontWeight.bold,
fontSize: 18.0,
),
),
Text(
flatNo,
style: const TextStyle(
fontWeight: FontWeight.bold,
fontSize: 24.0,
),
),
],
),
),
selected: selected,
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(5.0),
),
onSelected: onSelected,
);
}
}
如果您想让您的卡片可点击,您只需要使用 GestureDetector、InkWell 或 ... 包裹您的卡片小部件。
child: GestureDetector(
oneTap: (){...}
child: Card(..),
);
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.