如何停止在颤动中选择多个容器？

Question

嗨，伙计们，我是新来的，我正在尝试使用列表构建器设计一个水平时间选择器，但我无法只选择一个容器，它允许我选择多个容器，但我只想选择一个，下面我附上了代码，请帮助只选择一个容器。我只想选择一个时间容器来选择时间范围并在下面打印。提前致谢。

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: "custom time picker horizontal",
      home: TimePickerScreen(),
    );
  }
}

class TimePickerScreen extends StatefulWidget {

  @override
  _TimePickerScreenState createState() => _TimePickerScreenState();
}

class _TimePickerScreenState extends State<TimePickerScreen> {
  String selectedFromTime = " ";
  List<String> fromTimeList = ["0:00", "0:30", "1:00", "1:30", "2:00", "2:30", "3:00", "3:30", "4:00", "4:30", "5:00", "5:30", "6:00", "6:30"];
  List<bool> fromTimeListSelect =[false,false,false,false,false,false,false,false,false,false,false,false,false,false,];

  String selectedToTime =" ";
  List<String> toTimeList = ["0:00", "0:30", "1:00", "1:30", "2:00", "2:30", "3:00", "3:30", "4:00", "4:30", "5:00", "5:30", "6:00", "6:30"];
  List<bool> toTimeListSelect =[false,false,false,false,false,false,false,false,false,false,false,false,false,false,];

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('custom time picker horizontal'),
      ),
      body: Column(
        mainAxisAlignment: MainAxisAlignment.center,
        children: [
          Divider(),
          fromTime(),
          Divider(),
          toTime(),
          Text('From : $selectedFromTime To : $selectedToTime'),
        ],
      ),
    );
  }
  Widget fromTime(){
    return Expanded(
      child: ListView.builder(
        shrinkWrap: true,
          scrollDirection: Axis.horizontal,
          itemCount: fromTimeList.length,
          itemBuilder: (BuildContext context,int index){
            return GestureDetector(
              child: Container(
                padding: EdgeInsets.all(6),
                child: Center(
                    child: Text(fromTimeList[index],
                      style: TextStyle(color: fromTimeListSelect[index] ? Colors.white : Colors.black ,fontSize: 16),)),
                decoration: BoxDecoration(
                  shape: BoxShape.circle,
                  color: fromTimeListSelect[index] ? Colors.black : Colors.white,
                ),
              ),
              onTap: (){
                //isSelectedC = !isSelectedC;
                fromTimeListSelect[index] = !fromTimeListSelect[index];
                fromTimeListSelect[index] == true ? selectedFromTime =fromTimeList[index] : selectedFromTime= ' ';
                print(fromTimeListSelect[index]);
                print(fromTimeList[index]);
                setState(() {

                });
              },
            );

          },),
    );
  }

  Widget toTime(){
    return Expanded(
      child: ListView.builder(
        shrinkWrap: true,
        scrollDirection: Axis.horizontal,
        itemCount: fromTimeList.length,
        itemBuilder: (BuildContext context,int index){
          return GestureDetector(
            child: Container(
              padding: EdgeInsets.all(6),
              child: Center(
                  child: Text(toTimeList[index],
                    style: TextStyle(color: toTimeListSelect[index] ? Colors.white : Colors.black ,fontSize: 16),)),
              decoration: BoxDecoration(
                shape: BoxShape.circle,
                color: toTimeListSelect[index] ? Colors.black : Colors.white,
              ),
            ),
            onTap: (){
              //isSelectedC = !isSelectedC;
              toTimeListSelect[index] = !toTimeListSelect[index];
              toTimeListSelect[index] == true ? selectedToTime =toTimeList[index] : selectedToTime= ' ';
              print(toTimeListSelect[index]);
              print(toTimeList[index]);
              setState(() {

              });
            },
          );

        },),
    );
  }
}

Answer 1

请检查一下，它对你有用吗？

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  const MyApp({Key key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: "custom time picker horizontal",
      home: TimePickerScreen(),
    );
  }
}

class TimePickerScreen extends StatefulWidget {

  @override
  _TimePickerScreenState createState() => _TimePickerScreenState();
}

class _TimePickerScreenState extends State<TimePickerScreen> {
  String selectedFromTime = " ";
  List<String> fromTimeList = ["0:00", "0:30", "1:00", "1:30", "2:00", "2:30", "3:00", "3:30", "4:00", "4:30", "5:00", "5:30", "6:00", "6:30"];
  List<bool> fromTimeListSelect =[false,false,false,false,false,false,false,false,false,false,false,false,false,false,];

  String selectedToTime =" ";
  List<String> toTimeList = ["0:00", "0:30", "1:00", "1:30", "2:00", "2:30", "3:00", "3:30", "4:00", "4:30", "5:00", "5:30", "6:00", "6:30"];
  List<bool> toTimeListSelect =[false,false,false,false,false,false,false,false,false,false,false,false,false,false,];

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('custom time picker horizontal'),
      ),
      body: Column(
        mainAxisAlignment: MainAxisAlignment.center,
        children: [
          Divider(),
          fromTime(),
          Divider(),
          toTime(),
          Text('From : $selectedFromTime To : $selectedToTime'),
        ],
      ),
    );
  }
  Widget fromTime(){
    return Expanded(
      child: ListView.builder(
        shrinkWrap: true,
        scrollDirection: Axis.horizontal,
        itemCount: fromTimeList.length,
        itemBuilder: (BuildContext context,int index){
          return GestureDetector(
            child: Container(
              padding: EdgeInsets.all(6),
              child: Center(
                  child: Text(fromTimeList[index],
                    style: TextStyle(color: fromTimeListSelect[index] ? Colors.white : Colors.black ,fontSize: 16),)),
              decoration: BoxDecoration(
                shape: BoxShape.circle,
                color: fromTimeListSelect[index] ? Colors.black : Colors.white,
              ),
            ),
            onTap: (){
              //isSelectedC = !isSelectedC;

              setState(() { // here the update need

                for(int i=0; i< fromTimeListSelect.length;i++){
                  fromTimeListSelect[i] = false;
                }
                print(fromTimeListSelect);
                fromTimeListSelect[index] = !fromTimeListSelect[index];
                fromTimeListSelect[index] == true ? selectedFromTime =fromTimeList[index] : selectedFromTime= ' ';
                print(fromTimeListSelect);
              });
            },
          );

        },),
    );
  }

  Widget toTime(){
    return Expanded(
      child: ListView.builder(
        shrinkWrap: true,
        scrollDirection: Axis.horizontal,
        itemCount: fromTimeList.length,
        itemBuilder: (BuildContext context,int index){
          return GestureDetector(
            child: Container(
              padding: EdgeInsets.all(6),
              child: Center(
                  child: Text(toTimeList[index],
                    style: TextStyle(color: toTimeListSelect[index] ? Colors.white : Colors.black ,fontSize: 16),)),
              decoration: BoxDecoration(
                shape: BoxShape.circle,
                color: toTimeListSelect[index] ? Colors.black : Colors.white,
              ),
            ),
            onTap: (){
              //isSelectedC = !isSelectedC;
              toTimeListSelect[index] = !toTimeListSelect[index];
              toTimeListSelect[index] == true ? selectedToTime =toTimeList[index] : selectedToTime= ' ';
              print(toTimeListSelect[index]);
              print(toTimeList[index]);
              setState(() { // here the update need
                for(int i=0; i< toTimeListSelect.length;i++){
                  toTimeListSelect[i] = false;
                }
                toTimeListSelect[index] = !toTimeListSelect[index];
                toTimeListSelect[index] == true ? selectedToTime =toTimeList[index] : selectedToTime= ' ';
                print(toTimeListSelect[index]);
                print(toTimeList[index]);
              });
            },
          );

        },),
    );
  }
}

Answer 2

将此fromTimeListSelect 添加到setState

onTap: (){
                    //isSelectedC = !isSelectedC;
                    fromTimeListSelect[index] = !fromTimeListSelect[index];
                    fromTimeListSelect[index] == true ? selectedFromTime =fromTimeList[index] : selectedFromTime= ' ';
                    print(fromTimeListSelect[index]);
                    print(fromTimeList[index]);
                    setState(() {
                       fromTimeListSelect; //just add this line
                    });
                  }