Question

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

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),
  ),
 .....
 .....

Answer 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),
    ),

如何在Flutter中更改所选图块边框的颜色？

1 个答案: