我想在单击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来重建屏幕,它仍然不工作。我如何才能解决这个问题。任何帮助,谢谢
屏幕截图
1条答案
按热度按时间kt06eoxx1#
因为您的
setState
是针对您的ChooseRideWidget
的,所以您需要将底层表单构建器分离到新的stateful
类中,并在其中完成所有这些操作,如下所示:并将其传递给
ChooseRideWidget
类中的构建器,如下所示: