首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

如何停止在flutter中选择多个容器?

在Flutter中停止选择多个容器可以通过使用GestureDetectorsetState来实现。以下是一个示例代码:

代码语言:txt
复制
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列表中对应容器的选择状态。根据选择状态,我们可以改变容器的颜色或应用其他样式。

这是一个简单的示例,您可以根据自己的需求进行修改和扩展。请注意,这只是停止选择多个容器的一种方法,根据具体情况可能会有其他实现方式。

腾讯云相关产品和产品介绍链接地址:

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

领券