单击 ListTile 时如何更改按钮文本？

Question

我想在单击 ListTile 时更改按钮文本。
并添加了 5 个 listTile 和一个按钮，当我创建另一个名为 bb() 的方法时，在 listTile 中有一个 on Tap 函数。 在屏幕截图中，我实现了谷歌地图 api，并且有汽车图像、汽车名称、乘车奖、时间。

选择车辆.dart

import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:ura_taxi/resources/strings.dart';
import 'package:ura_taxi/widgets/home/driver_info_widget.dart';

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

  @override
  State<ChooseRideWidget> createState() => _ChooseRideWidgetState();
}

class _ChooseRideWidgetState extends State<ChooseRideWidget> {

  String vehicle = "Any";
  bool isClciked = false;


  void bb(String v){
    print('Clicked Clicked');
    if(mounted){
      setState(() {
        vehicle = v;
      });
    }
  }

  void showBottomVehicleSheet(){
    showModalBottomSheet(
        shape: const RoundedRectangleBorder(
          borderRadius: BorderRadius.only(
              topRight: Radius.circular(10.0),
              topLeft: Radius.circular(10.0)),
        ),
        context: context,
        builder: (context){
      return Container(
        padding: EdgeInsets.symmetric(vertical: 10,horizontal: 10),
        child: SingleChildScrollView(
          child: Column(
            mainAxisAlignment: MainAxisAlignment.start,
            children: [
              ListTile(
                leading: Column(
                  mainAxisAlignment: MainAxisAlignment.start,
                  children: [
                    Image(image: AssetImage('assets/images/car.png'),width: 40,height: 40,),
                    Expanded(child: Text("3 min",style: TextStyle(fontSize: 10)))
                  ],
                ),
                title: Text("Book any",style: TextStyle(fontWeight: FontWeight.bold),),
                subtitle: Text("Mini,Prime Sedan",style: TextStyle(fontSize: 10,color: Colors.grey)),
                onTap: () {
                    vehicle = "any";
                    bb(vehicle);
                },
                trailing: Text("\u{20B9}351-\u{20B9}400"),
                dense:true,
                visualDensity: VisualDensity(vertical: 3),
              ),
              SizedBox(height: 5,),
              ListTile(
                leading: Column(
                  children: [
                    Image(image: AssetImage('assets/images/rickshaw.png'),width: 30,height: 30,),
                    Expanded(child: Text("3 min",style: TextStyle(fontSize: 10)))
                  ],
                ),
                title: Text("Auto",style: TextStyle(fontWeight: FontWeight.bold),),
                subtitle: Text("Get autos at your door step",style: TextStyle(fontSize: 10,color: Colors.grey)),
                onTap: () {
                  vehicle = "Auto";
                  bb(vehicle);
                  print("ListTile" + vehicle);
                },
                trailing: Text("\u{20B9}151"),
                dense:true,
                visualDensity: VisualDensity(vertical: 3),
              ),
              SizedBox(height: 5,),
              ListTile(
                leading: Column(
                  children: [
                    Image(image: AssetImage('assets/images/suv.png'),width: 30,height: 30,),
                    Expanded(child: Text("3 min",style: TextStyle(fontSize: 10)))
                  ],
                ),
                title: Text("suv",style: TextStyle(fontWeight: FontWeight.bold),),
                subtitle: Text("comfy economical cars",style: TextStyle(fontSize: 10,color: Colors.grey)),
                onTap: () {
                    vehicle = "suv";
                    print("ListTile" + vehicle);
                },
                trailing: Text("\u{20B9}151"),
                dense:true,
                visualDensity: VisualDensity(vertical: 3),
              ),
              SizedBox(height: 5,),
              ListTile(
                leading: Image(image: AssetImage('assets/images/coupon_icon.png'),width: 30,height: 30,),
                title: Text("Apply Coupon Code",style: TextStyle(fontWeight: FontWeight.bold),),
                onTap: () {},
                trailing:   Icon(
                  Icons.arrow_forward_ios,
                  size: 15,
                ),
                dense:true,
                visualDensity: VisualDensity(vertical: 3),
              ),
              SizedBox(height: 5,),
              ListTile(
                leading: Image(image: AssetImage('assets/images/rupee_icon.png'),width: 30,height: 30,),
                title: Text("cash",style: TextStyle(fontWeight: FontWeight.bold),),
                onTap: () {},
                trailing:   Icon(
                  Icons.arrow_forward_ios,
                  size: 15,
                ),
                dense:true,
                visualDensity: VisualDensity(vertical: 3),
              ),
              SizedBox(height: 5,),
              MaterialButton(
                child: Text('Book ${vehicle}'),
                height: 50,
                color: Colors.purple,
                textColor: Colors.white,
                minWidth: 280,
                shape: RoundedRectangleBorder(
                  borderRadius: BorderRadius.circular(10.0),
                ), onPressed: () {
                Navigator.pop(context);
                    showModalBottomSheet(
                        shape: const RoundedRectangleBorder(
                          borderRadius: BorderRadius.only(
                              topRight: Radius.circular(10.0),
                              topLeft: Radius.circular(10.0)),
                        ),
                      context: context, builder: (context) {
                        return DriverInfoWidget();
                      });
                   },
              )
            ],
          ),
        ),
      );
    });
  }

  @override
  Widget build(BuildContext context) {
    return Wrap(
      children:[
        Padding(
          padding: EdgeInsets.symmetric(vertical: 10,horizontal: 20),
          child: Column(
            children: [
              Text(Strings.someone_take_ride_title,style: TextStyle(fontSize: 20,fontWeight: FontWeight.bold),),
              SizedBox(height: 10,),
              Text(Strings.someone_take_ride_subtitle,style: TextStyle(color: Colors.grey,fontSize: 15),textAlign: TextAlign.center,),
              SizedBox(height: 10,),
              Row(
                children: [
                  Radio(
                      value: "myself",
                      groupValue: "myself",
                      onChanged: (value){
                        setState(() {
                          // gender = value.toString();
                        });
                      }),
                  Icon(
                    Icons.person,
                    color: Colors.blue,
                  ),
                  SizedBox(width: 5,),
                  Text("Myself",style: TextStyle(fontSize: 15),)
                ],
              ),
              const Divider(
                thickness: 1, // thickness of the line
                indent: 45, // empty space to the leading edge of divider.
                endIndent: 5, // empty space to the trailing edge of the divider.
                color: Colors.grey, // The color to use when painting the line.
                height: 20, // The divider's height extent.
              ),
              Row(
                children: [
                  SizedBox(width: 45,),
                  Icon(
                    Icons.contact_page,
                    color: Colors.blue,
                  ),
                  SizedBox(width: 5,),
                  Text(Strings.someone_take_ride_contact,style: TextStyle(fontSize: 15,color: Colors.blue),),
                  SizedBox(width: 25,),
                  Spacer(),
                  Icon(
                    Icons.arrow_forward_ios,
                    color: Colors.blue,
                    size: 15,
                  ),
                ],
              ),
              SizedBox(height: 20,),
              Row(
                mainAxisAlignment: MainAxisAlignment.spaceBetween,
                children: [
                  MaterialButton(
                    height: 50.0,
                    minWidth: 150.0,
                    shape: RoundedRectangleBorder(
                        borderRadius: BorderRadius.circular(10.0)),
                    color: Colors.grey[200],
                    textColor: Colors.black,
                    child:  Text("skip"),
                    onPressed: () => {},
                    splashColor: Colors.redAccent,
                  ),

                  MaterialButton(
                    height: 50.0,
                    minWidth: 150.0,
                    shape: RoundedRectangleBorder(
                        borderRadius: BorderRadius.circular(10.0)),
                    color: Colors.black,
                    textColor: Colors.white,
                    child:  Text("Continue"),
                    onPressed: () {
                      Navigator.pop(context);
                      showBottomVehicleSheet();
                    }
                  )
                ],
              )
            ],
          ),
        ),
      ]

    );
  }
}

当我从 chooseRideWidget 类中单击继续按钮时，我正在调用 Showbottomsheet 方法。它将从底部显示模态表。 当我单击车辆（ListTile）时，我正在选择车辆，它应该更改按钮文本。
我添加了 setState 来重建它仍然无法正常工作的屏幕。 我该如何解决这个问题。 任何帮助表示感谢谢谢

截屏

谢谢您的帮助。

Answer 1

因为你的setState 是你的ChooseRideWidget，你需要将你的底部工作表构建器分离到新的stateful 类中，并在其中完成所有这些，如下所示：

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

  @override
  State<BottomSheetBuilder> createState() => _BottomSheetBuilderState();
}

class _BottomSheetBuilderState extends State<BottomSheetBuilder> {

  String vehicle = "Any";
  bool isClciked = false;


  void bb(String v){
    print('Clicked Clicked');
    if(mounted){
      setState(() {
        vehicle = v;
      });
    }
  }
  
  @override
  Widget build(BuildContext context) {
    return Container(
        padding: EdgeInsets.symmetric(vertical: 10,horizontal: 10),
        child: SingleChildScrollView(
          child: Column(
            mainAxisAlignment: MainAxisAlignment.start,
            children: []
            ....
          )));
  }
}

并将其传递给 ChooseRideWidget 类中的构建器，如下所示：

void showBottomVehicleSheet(){
    showModalBottomSheet(
        shape: const RoundedRectangleBorder(
          borderRadius: BorderRadius.only(
              topRight: Radius.circular(10.0),
              topLeft: Radius.circular(10.0)),
        ),
        context: context,
        builder: (context){
      return BottomSheetBuilder();
    });
  }