在Flutter中停止选择多个容器可以通过使用GestureDetector
和setState
来实现。以下是一个示例代码:
import 'package:flutter/material.dart';
class MultipleContainerSelection extends StatefulWidget {
@override
_MultipleContainerSelectionState createState() =>
_MultipleContainerSelectionState();
}
class _MultipleContainerSelectionState extends State<MultipleContainerSelection> {
List<bool> isSelected = [false, false, false];
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('Multiple Container Selection'),
),
body: Column(
children: [
Container(
color: isSelected[0] ? Colors.blue : Colors.grey,
height: 100,
width: double.infinity,
child: GestureDetector(
onTap: () {
setState(() {
isSelected[0] = !isSelected[0];
});
},
child: Center(
child: Text(
'Container 1',
style: TextStyle(fontSize: 20, color: Colors.white),
),
),
),
),
Container(
color: isSelected[1] ? Colors.blue : Colors.grey,
height: 100,
width: double.infinity,
child: GestureDetector(
onTap: () {
setState(() {
isSelected[1] = !isSelected[1];
});
},
child: Center(
child: Text(
'Container 2',
style: TextStyle(fontSize: 20, color: Colors.white),
),
),
),
),
Container(
color: isSelected[2] ? Colors.blue : Colors.grey,
height: 100,
width: double.infinity,
child: GestureDetector(
onTap: () {
setState(() {
isSelected[2] = !isSelected[2];
});
},
child: Center(
child: Text(
'Container 3',
style: TextStyle(fontSize: 20, color: Colors.white),
),
),
),
),
],
),
);
}
}
void main() {
runApp(MaterialApp(
home: MultipleContainerSelection(),
));
}
在上述代码中,我们使用了isSelected
列表来跟踪每个容器的选择状态。当用户点击容器时,通过setState
方法更新isSelected
列表中对应容器的选择状态。根据选择状态,我们可以改变容器的颜色或应用其他样式。
这是一个简单的示例,您可以根据自己的需求进行修改和扩展。请注意,这只是停止选择多个容器的一种方法,根据具体情况可能会有其他实现方式。
腾讯云相关产品和产品介绍链接地址:
领取专属 10元无门槛券
手把手带您无忧上云