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

nqwrtyyt  于 2023-02-09  发布在  Flutter
关注(0)|答案(1)|浏览(153)

我想在单击ListTile时更改按钮文本。
并增加了5个listTile和一个按钮,在listTile里面有一个on Tap函数,我创建了另一个方法bb(),在截图中我实现了谷歌MapAPI,有一个汽车图像,汽车名称,乘车奖励,时间。

选择车辆.省道

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来重建屏幕,它仍然不工作。我如何才能解决这个问题。任何帮助,谢谢

屏幕截图

kt06eoxx

kt06eoxx1#

因为您的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();
    });
  }

相关问题