Flutter容器列表中如何选中单个容器并仅修改其边框样式

问题根因 #

你当前所有容器共用同一个全局的borderColor状态变量，只要修改这个值，所有绑定了该变量的容器边框都会同步更新，这是出现联动修改的核心原因。

解决方法 #

• 把原来单一的borderColor变量替换为int? selectedIndex，用来记录当前被选中的容器索引
• 每个容器生成时，对比自身索引和selectedIndex，匹配时使用选中态的边框颜色，否则用默认颜色
• 点击容器时只更新selectedIndex为当前点击的容器索引即可
• 如果需要支持多选场景，可以把selectedIndex替换为Set<int> selectedIndexes，点击时判断索引是否在集合内决定新增还是移除即可

修改后可运行代码 #

import 'package:flutter/material.dart';

class MyHomePage extends StatefulWidget {
  const MyHomePage({Key? key}) : super(key: key);

  @override
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  // 记录当前选中的容器索引，初始为null表示无选中
  int? selectedIndex;
  final Color defaultBorderColor = Colors.black;
  final Color selectedBorderColor = Colors.white;

  @override
  Widget build(BuildContext context) {
    var n = 5;
    var listOfContainers = <Padding>[];
    var list = List<int>.generate(n, (i) => i + 1);
    for (var i in list) {
      listOfContainers.add(
        Padding(
          padding: const EdgeInsets.all(10),
          child: Container(
            width: 100,
            height: 100,
            decoration: BoxDecoration(
                color: Colors.brown,
                // 匹配当前索引则用选中色，否则用默认色
                border: Border.all(width: 3, color: selectedIndex == i ? selectedBorderColor : defaultBorderColor),
                borderRadius: const BorderRadius.all(Radius.circular(5))),
            child: InkWell(
              onTap: () {
                setState(() {
                  selectedIndex = i;
                  print(i);
                });
              },
            ),
          ),
        ),
      );
    }

    return Scaffold(
      appBar: AppBar(
        title: const Text('test app'),
      ),
      body: Center(
        child: Column(
          children: [
            Row(mainAxisAlignment: MainAxisAlignment.center, children: listOfContainers)
          ],
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: () {},
        tooltip: 'Increment',
        child: const Icon(Icons.add),
      ),
    );
  }
}

内容的提问来源于stack exchange，提问作者Cameron Johnson