我们在本章回中介绍的星期组件是一个可以在一周内任意选择一天的星期组件,详细如下图所示036,图中的组件从周一到周日依次排列,它们组合在一起表示一周,可以
从中任意选择一天,此时被选择的哪天高亮显示,其它未被选择的内容正常显示。
对于这种复杂的组件,我们可以把它拆开来分析:这个星期组件中每一天都是一个独立的组件,把这些组件组合成一行就是一个完整的星期组件,星期组件中可以任意选择
某一天,这个需要在组件中添加事件响应相关的组件。响应事件后把原来的组件变成高亮状态。此外,这个星期组件中只能在一个星期内选择一天,也就是说星期组件内的
组件是互斥的,它们有且只有一个能被选择,这个需要使用单独按钮中的互斥思路,我们在前面章回中自定义单选按钮时介绍过这种思想。
有了总体的思路后,就有了明确的方向,接下来我们通过具体的方法来演示如何实现可选择的星期组件:
class WeekItemWidget extends StatefulWidget {
const WeekItemWidget({
super.key, required this.itemName, required this.index, required this.groupValue, required this.itemClicked,
});
///显示的内容,比如mon,wed
final String itemName;
///用来实现互斥访问组件
final int index;
final int groupValue;
final ItemClicked<int> itemClicked;
State<WeekItemWidget> createState() => _WeekItemWidgetState();
}
class _WeekItemWidgetState extends State<WeekItemWidget> {
bool isClicked = false;
Widget build(BuildContext context) {
debugPrint("group: ${widget.groupValue}, index:${widget.index}");
///这个用来判断组件是否被选择
if(widget.groupValue == widget.index ) {
isClicked = true;
}else {
isClicked = false;
}
return Listener(
///响应用户的点击事件
onPointerDown:(event) {
widget.itemClicked(widget.index);
},
child: SingleItemWidget(isClicked: isClicked,itemName: widget.itemName,),
);
}
}
///依据组件是否被选择来切换正常文本和高亮文本
class SingleItemWidget extends StatelessWidget {
const SingleItemWidget({
super.key, required this.isClicked, required this.itemName,
});
final bool isClicked;
final String itemName;
Widget build(BuildContext context) {
if(isClicked) {
return Container(
width: 40,
height: 48,
alignment: Alignment.center,
decoration: BoxDecoration(
color: Colors.blue,
borderRadius: BorderRadius.circular(12),
),
child: Text(itemName, style: const TextStyle(color: Colors.white),),
);
}else {
return Container(
width: 40,
height: 48,
alignment: Alignment.center,
decoration: BoxDecoration(
color: Colors.white,
borderRadius: BorderRadius.circular(12),
),
child: Text(itemName, style: const TextStyle(color: Colors.black),),
);
}
}
}
///把单独组件组合成一行,构成星期组件,这里只列出了两个组件,其它的组件省略不写
Row(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: [
WeekItemWidget(itemName:"Mon", index: 1, groupValue: groupId,
itemClicked: (value){
setState(() {
groupId = value;
},);
},
),
WeekItemWidget(itemName: "Sun", index:7, groupValue: groupId,
itemClicked: (value){
setState(() {
groupId = value;
},);
},
),
],
),
上面的示例代码中完全按照实现方法中介绍的步骤来编写,我们在代码的关键位置添加了注释,这样方便大家理解代码。编译并且运行该程序可以得到文本开始演示的运行
效果图。建议大家自己动手去实践,特别是互斥访问组件的内容。
最后,我们对本章回的内容做一个全面的介绍: