如何在 flutter 中使用 CheckBox 将数据从一个 TextFormField 复制到另一个 TextFormField
How to copy data from one TextFormField to Another TextFormField by using CheckBox in flutter
我有两个文本表单字段 Billing Address 和 Shipping Address 当用户在文本表单字段中输入帐单地址时，我想通过 checkBox 将这些数据复制到我的送货地址字段。如果用户 Shipping 和 Billing Address 相同，我不希望用户再次将数据放入送货地址字段。
这是我的 class
class Shipping_Address_Page extends StatefulWidget {
const Shipping_Address_Page({Key? key}) : super(key: key);
@override
State<Shipping_Address_Page> createState() => _Shipping_Address_PageState();
}
class _Shipping_Address_PageState extends State<Shipping_Address_Page> {
bool sameAddress = false;
//===================================billing controller===============================
late TextEditingController UserBilling_Name_Controller =TextEditingController(text: UserBillingNAme);
late TextEditingController UserBilling_Email_Controller =TextEditingController(text: UserBillingEmail);
//===================================shipping===============================
late TextEditingController UserShipping_NAme_Controller =TextEditingController(text: UserShippingNAme);
late TextEditingController UserShipping_Email_Controller =TextEditingController(text: UserShippingEmail);
Ui 文本表单字段的代码
Column(
mainAxisAlignment: MainAxisAlignment.start,
crossAxisAlignment: CrossAxisAlignment.start,
children: [
FutureBuilder(
future: PredifinedAddressModel_Api(),
builder: (BuildContext context, AsyncSnapshot snapshot) {
if (snapshot.connectionState != ConnectionState.done) {
return Center(
child:
CupertinoActivityIndicator());
}
if (snapshot.hasData) {
return Column(
crossAxisAlignment: CrossAxisAlignment.stretch,
children: [
//=================================Billing address=============================
Container(
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(15),
color: Color(0xFFE4D8DC)),
child: Padding(
padding: EdgeInsets.symmetric(
horizontal: getProportionateScreenWidth(20),
vertical: getProportionateScreenHeight(30)),
child: Column(
children: [
Container(
decoration: BoxDecoration(
color: Color(0xFFf0f0f0),
borderRadius: BorderRadius.circular(15),
),
margin: EdgeInsets.all(10),
child: TextFormField(
textCapitalization: TextCapitalization.sentences,
controller: UserBilling_Name_Controller,//===Controller
decoration: InputDecoration(
contentPadding: EdgeInsets.symmetric(
horizontal:
getProportionateScreenWidth(20),
vertical:
getProportionateScreenWidth(
15)),
border: InputBorder.none,
focusedBorder: InputBorder.none,
labelText: "Name",
enabledBorder: InputBorder.none,
hintText: "Your name",
hintStyle: TextStyle(
color:
Colors.black.withOpacity(0.4)),
prefixIcon:
Icon(Icons.account_circle,size: 13.0)),
),
),
//===================================Shipping===============================
SizedBox(height: getProportionateScreenHeight(20),),
Padding(
padding: EdgeInsets.only(left: 8.0, bottom: 16),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
SizedBox(
height: getProportionateScreenHeight(20),
),
Text(
"Shipping address",
style: TextStyle(
fontSize: getProportionateScreenHeight(30),
color: Colors.black,
fontFamily: 'Gilroy',
fontWeight: FontWeight.w700),
),
],
),
),
SizedBox(height: getProportionateScreenHeight(20),),
//=================================check box=====================================
Row(
children: [
Checkbox(
value: sameAddress, //false
activeColor: Colors.green,
onChanged: (value) {
setState(() {
sameAddress = value!;
});
},
),
Text("Ship to Same address?"),
],
),
//=====================================================================================
Container(
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(15),
color: Color(0xFFC8E3D4)),
child: Padding(
padding: EdgeInsets.symmetric(
horizontal: getProportionateScreenWidth(20),
vertical: getProportionateScreenHeight(30)),
child: Column(
children: [
Container(
decoration: BoxDecoration(
color: Color(0xFFf0f0f0),
borderRadius: BorderRadius.circular(15),
),
margin: EdgeInsets.all(10),
child: TextFormField(
textCapitalization: TextCapitalization.sentences,
controller: UserShipping_NAme_Controller,//===Controller
decoration: InputDecoration(
contentPadding: EdgeInsets.symmetric(
horizontal:
getProportionateScreenWidth(20),
vertical:
getProportionateScreenWidth(
15)),
border: InputBorder.none,
focusedBorder: InputBorder.none,
labelText: "Name",
enabledBorder: InputBorder.none,
hintText: "Your name",
hintStyle: TextStyle(
color:
Colors.black.withOpacity(0.4)),
prefixIcon:
Icon(Icons.account_circle,size: 13.0)),
),
),
您可以在需要时将 controller 的值显式设置到 setState
例如
billingTextController.text = shippingTextController.text;
Row(
children: [
Checkbox(
value: sameAddress, //false
activeColor: Colors.green,
onChanged: (value) {
setState(() {
UserShipping_NAme_Controller.text = UserBilling_Name_Controller.text;
UserShipping_Email_Controller.text = UserBilling_Email_Controller.text;
});
},
),
Text("Ship to Same address?"),
],
),
用此代码替换包含复选框的行。
您可以添加 2 个控制器并根据复选框值将两个控制器等同起来
late TextEditingController UserBilling_Address_Controller =TextEditingController(text: UserBillingAddress);
late TextEditingController UserShipping_Address_Controller =TextEditingController(text: UserShippingAddress);
复选框 onChange
UserShipping_Address_Controller = value ? UserBilling_Address_Controller.text : ""
试试下面的代码希望对你有帮助。
创建您的 TextEditingController() 变量
final shippingController = TextEditingController();
final billingController = TextEditingController();
复选框的布尔变量：
bool isChecked = false;
您的小部件：
Column(
children: [
TextFormField(
controller: shippingController,
decoration: InputDecoration(
labelText: 'shipping address',
border: OutlineInputBorder(),
),
),
TextFormField(
controller: billingController,
decoration: InputDecoration(
labelText: 'billing address',
border: OutlineInputBorder(),
),
),
SizedBox(
height: 50,
),
Row(
children: [
Checkbox(
value: isChecked, //false
activeColor: Colors.green,
onChanged: (value) {
setState(() {
billingController.text =
shippingController.text;
});
},
),
Text("Ship to Same address?"),
],
),
],
),
结果屏幕>
我有两个文本表单字段 Billing Address 和 Shipping Address 当用户在文本表单字段中输入帐单地址时，我想通过 checkBox 将这些数据复制到我的送货地址字段。如果用户 Shipping 和 Billing Address 相同，我不希望用户再次将数据放入送货地址字段。
这是我的 class
class Shipping_Address_Page extends StatefulWidget {
const Shipping_Address_Page({Key? key}) : super(key: key);
@override
State<Shipping_Address_Page> createState() => _Shipping_Address_PageState();
}
class _Shipping_Address_PageState extends State<Shipping_Address_Page> {
bool sameAddress = false;
//===================================billing controller===============================
late TextEditingController UserBilling_Name_Controller =TextEditingController(text: UserBillingNAme);
late TextEditingController UserBilling_Email_Controller =TextEditingController(text: UserBillingEmail);
//===================================shipping===============================
late TextEditingController UserShipping_NAme_Controller =TextEditingController(text: UserShippingNAme);
late TextEditingController UserShipping_Email_Controller =TextEditingController(text: UserShippingEmail);
Ui 文本表单字段的代码
Column(
mainAxisAlignment: MainAxisAlignment.start,
crossAxisAlignment: CrossAxisAlignment.start,
children: [
FutureBuilder(
future: PredifinedAddressModel_Api(),
builder: (BuildContext context, AsyncSnapshot snapshot) {
if (snapshot.connectionState != ConnectionState.done) {
return Center(
child:
CupertinoActivityIndicator());
}
if (snapshot.hasData) {
return Column(
crossAxisAlignment: CrossAxisAlignment.stretch,
children: [
//=================================Billing address=============================
Container(
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(15),
color: Color(0xFFE4D8DC)),
child: Padding(
padding: EdgeInsets.symmetric(
horizontal: getProportionateScreenWidth(20),
vertical: getProportionateScreenHeight(30)),
child: Column(
children: [
Container(
decoration: BoxDecoration(
color: Color(0xFFf0f0f0),
borderRadius: BorderRadius.circular(15),
),
margin: EdgeInsets.all(10),
child: TextFormField(
textCapitalization: TextCapitalization.sentences,
controller: UserBilling_Name_Controller,//===Controller
decoration: InputDecoration(
contentPadding: EdgeInsets.symmetric(
horizontal:
getProportionateScreenWidth(20),
vertical:
getProportionateScreenWidth(
15)),
border: InputBorder.none,
focusedBorder: InputBorder.none,
labelText: "Name",
enabledBorder: InputBorder.none,
hintText: "Your name",
hintStyle: TextStyle(
color:
Colors.black.withOpacity(0.4)),
prefixIcon:
Icon(Icons.account_circle,size: 13.0)),
),
),
//===================================Shipping===============================
SizedBox(height: getProportionateScreenHeight(20),),
Padding(
padding: EdgeInsets.only(left: 8.0, bottom: 16),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
SizedBox(
height: getProportionateScreenHeight(20),
),
Text(
"Shipping address",
style: TextStyle(
fontSize: getProportionateScreenHeight(30),
color: Colors.black,
fontFamily: 'Gilroy',
fontWeight: FontWeight.w700),
),
],
),
),
SizedBox(height: getProportionateScreenHeight(20),),
//=================================check box=====================================
Row(
children: [
Checkbox(
value: sameAddress, //false
activeColor: Colors.green,
onChanged: (value) {
setState(() {
sameAddress = value!;
});
},
),
Text("Ship to Same address?"),
],
),
//=====================================================================================
Container(
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(15),
color: Color(0xFFC8E3D4)),
child: Padding(
padding: EdgeInsets.symmetric(
horizontal: getProportionateScreenWidth(20),
vertical: getProportionateScreenHeight(30)),
child: Column(
children: [
Container(
decoration: BoxDecoration(
color: Color(0xFFf0f0f0),
borderRadius: BorderRadius.circular(15),
),
margin: EdgeInsets.all(10),
child: TextFormField(
textCapitalization: TextCapitalization.sentences,
controller: UserShipping_NAme_Controller,//===Controller
decoration: InputDecoration(
contentPadding: EdgeInsets.symmetric(
horizontal:
getProportionateScreenWidth(20),
vertical:
getProportionateScreenWidth(
15)),
border: InputBorder.none,
focusedBorder: InputBorder.none,
labelText: "Name",
enabledBorder: InputBorder.none,
hintText: "Your name",
hintStyle: TextStyle(
color:
Colors.black.withOpacity(0.4)),
prefixIcon:
Icon(Icons.account_circle,size: 13.0)),
),
),
您可以在需要时将 controller 的值显式设置到 setState
例如
billingTextController.text = shippingTextController.text;
Row(
children: [
Checkbox(
value: sameAddress, //false
activeColor: Colors.green,
onChanged: (value) {
setState(() {
UserShipping_NAme_Controller.text = UserBilling_Name_Controller.text;
UserShipping_Email_Controller.text = UserBilling_Email_Controller.text;
});
},
),
Text("Ship to Same address?"),
],
),
用此代码替换包含复选框的行。
您可以添加 2 个控制器并根据复选框值将两个控制器等同起来
late TextEditingController UserBilling_Address_Controller =TextEditingController(text: UserBillingAddress);
late TextEditingController UserShipping_Address_Controller =TextEditingController(text: UserShippingAddress);
复选框 onChange
UserShipping_Address_Controller = value ? UserBilling_Address_Controller.text : ""
试试下面的代码希望对你有帮助。
创建您的 TextEditingController() 变量
final shippingController = TextEditingController();
final billingController = TextEditingController();
复选框的布尔变量：
bool isChecked = false;
您的小部件：
Column(
children: [
TextFormField(
controller: shippingController,
decoration: InputDecoration(
labelText: 'shipping address',
border: OutlineInputBorder(),
),
),
TextFormField(
controller: billingController,
decoration: InputDecoration(
labelText: 'billing address',
border: OutlineInputBorder(),
),
),
SizedBox(
height: 50,
),
Row(
children: [
Checkbox(
value: isChecked, //false
activeColor: Colors.green,
onChanged: (value) {
setState(() {
billingController.text =
shippingController.text;
});
},
),
Text("Ship to Same address?"),
],
),
],
),
结果屏幕>