android - 如何使保留席位无法选择？

Question

我试图制作一个旅行预订应用程序，但是我很困惑如何无法再次选择保留的座位。我使用StaggeredGridView显示座位选项，Container中的每个StaggeredGridView都有一个索引。我可以使用index保存所选座位的.sublist ()，但是我对必须保存索引的位置感到困惑，以便稍后可以使用index使得无法再次选择座位(禁用)。以及如何检查座位index是特定汽车的index？
This is a picture of what I'm talking about to make it clearer
-编辑(添加代码)-
这是显示座位的代码

class Kursi extends StatefulWidget {
  Function onTapKursi, sisaKursi, bookedKursi;
  Kursi({this.onTapKursi, this.sisaKursi, this.bookedKursi});

  @override
  _KursiState createState() => _KursiState();
}
class _KursiState extends State<Kursi> {
  
  List<String> _listSeats = List();
  List<int> _selectedIndexList = List();
  String amount, availableSeat, idCar; 
  int amountInt, idCarInt, totalPassenger, availableSeatInt;

  getPref()async{
    SharedPreferences preferences = await SharedPreferences.getInstance();
    setState(() {
      idCar = preferences.getString('id_armada');
      amount = preferences.getString('kursi');
      availableSeat = preferences.getString('sisaKursi');
      totalPassenger = preferences.getInt('jumlah');
      idCarInt = int.parse(idCar);
      amountInt = int.parse(amount);
      availableSeatInt = int.parse(availableSeat);
      for (var i = 1; i <= amountInt; i++) {
       _listSeats.add(i.toString());
      }
    });
  }

  @override
  void initState() {
    getPref();
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    return Expanded(
      child: StaggeredGridView.countBuilder(
        padding: EdgeInsets.only(top: 0, bottom: 0),
        crossAxisSpacing: 70,
        mainAxisSpacing: 7,
        crossAxisCount: 2,
        itemCount: _listSeats.length,
        staggeredTileBuilder: (int index) => StaggeredTile.fit(1),
        itemBuilder: (BuildContext context, int index) {
          return GridTile(
            child: InkWell(
              child: Container(
                alignment: Alignment.center,
                decoration: BoxDecoration(
                    color: _selectedIndexList.contains(index)
                        ? Colors.purple
                        : Color(0xFFFf6f5fb),
                    borderRadius: BorderRadius.all(Radius.circular(8)),
                    border: Border.all(
                        color: Colors.black,
                        width: 2,
                        style: BorderStyle.solid)),
                height: 30,
                width: 30,
                child: Text(
                  _listSeats[index],
                ),
              ),
              onTap: () {
                if (_selectedIndexList.length < totalPassenger || _selectedIndexList.contains(index)) {
                  setState(() {
                  if (_selectedIndexList.contains(index)) {
                    _selectedIndexList.remove(index);
                  } else {
                    _selectedIndexList.add(index);
                  }
                });
                } else {
                  return null;
                }
                this.widget.onTapKursi(index);
                this.widget.sisaKursi(availableSeatInt, _selectedIndexList.length);
                this.widget.bookedKursi(_selectedIndexList.sublist(0));
              },
            ),
          );
        },
      ),
    );
  }
}

Answer 1

创建一个代表每个汽车的类，并提供一个ID和一个座位图，您可以在其中设置是否选择。如果选中，则将索引和标志设置为true，否则设置为false:

class Car {
    
   int id
   int seatsAmount; //amount of seats
   Map<int, bool> seats; //map of seats

   Car(this.id);

   //method to initialize the seats map with false to indicate not reserved
   initSeatsMap(){
    for(int i=0; i<numOfSeats; i++){
      this.seats[i] = false;
    }
  }
}

Car someCar = Car(1);
someCar.initSeatsMap();

然后，您可以检查何时调用select(或onTap)函数:

onTap: someCar.seats[index] == false 
                    ? 
                    () { 
                     someCar.seats[index] = true; 
                     //write some code to change the color of the seat
                    } 
                    : 
                    null; // null means that when you tap after a seat is selected the onTap will do nothing;

当您从共享首选项中获得席位时，可以执行以下操作:

Car anyCar = Car(idCar);
//The result is something like this: 
anyCar.seats = json.decode(sharedPreferencesSeats);

或仅创建一个像这样的 map :

Map<int, bool> seats = json.decode(sharedPreferencesSeats);

然后，您可以像这样检查预订的座位:

// or seats.forEach(...) if you create the Map
anyCar.seats.forEach((key,value){
    if(value == true){
      print('Seat $key - Reserved');
    }else{
      print('Seat $key - Availabe');
    }
  } );