如何更改 Flutter 中所选磁贴的边框颜色？答案

【问题标题】：How can I change the colour of the border of the selected tile in Flutter?如何更改 Flutter 中所选磁贴的边框颜色？
【发布时间】：2019-11-24 06:19:49
【问题描述】：

我有显示可用航班列表的磁贴列表。我想更改所选图块边框的颜色。目前，它会更改所有图块的颜色，而不仅仅是选定的图块。

final flightState = Provider.of<AppState>(context);
return new Material(
    child: ListView.builder(
        itemCount: entityContainer.inbound.length,
        itemBuilder: (BuildContext context, i) => ListTile(
            title: new Row(
              children: <Widget>[
                new Results(
                  entityContainer.inbound[i].departureAirportName,
                  entityContainer.inbound[i].arrivalAirportName,
                  entityContainer.inbound[i].serviceProvider,
                  entityContainer.inbound[i].departureTime,
                  entityContainer.inbound[i].arrivalTime,

                ),
              ],
            ),
            onTap: () {
              if (flightState.getInboundIndex() == i) {
                flightState.updateInboundIndex(-1);
                flightState.unSelectTile();
              } else {
                flightState.updateInboundIndex(i);
                flightState.selectTile();

              }
            })));

我已经用provider保持状态

AppState.dart

class AppState with ChangeNotifier {
  int _inboundIndex;
  bool _selected;

  AppState(this._inboundIndex, this._selected);

  getInboundIndex() => _inboundIndex;
  getSelected() => _selected;

  void updateInboundIndex(i) {
    _inboundIndex = i;
    notifyListeners();
  }

  void selectTile() {
    _selected = true;
    notifyListeners();
  }

  void unSelectTile() {
    _selected = false;
    notifyListeners();
  }}

这是根据状态进行绘图的地方

Result.dart

  .....
  .....
  decoration: BoxDecoration(
    border: Border.all(
        color: flightState.getSelected() ? Colors.green : Colors.black26,
        width: flightState.getSelected() ? 8.0 : 1.0),
  ),
 .....
 .....

【问题讨论】：

flightState 是否为每个航班（或列表中的项目）使用了唯一的实例？如果您能添加定义flightState 的位置和方式，将会很有帮助。
我已经包含了定义flightState的行。

标签： flutter dart flutter-provider

【解决方案1】：

如果有人遇到类似问题。这就是我解决问题的方法：

我已经通过了如下索引

          new Results(
              entityContainer.inbound[i].departureAirportName,
              entityContainer.inbound[i].arrivalAirportName,
              entityContainer.inbound[i].serviceProvider,
              entityContainer.inbound[i].departureTime,
              entityContainer.inbound[i].arrivalTime,
              i
            ),

并且，将渲染更改如下：

    decoration: BoxDecoration(
    border: Border.all(
        color: (flightState.getSelected() &&
                currentIndex == flightState.getInboundIndex())
            ? Colors.green
            : Colors.black26,
        width: flightState.getSelected() ? 2.0 : 1.0),
    ),

【讨论】：