如何仅在一个 textformfield flutter 中更改值?
How to change value in only one textformfield flutter?
我在函数 Counter 中连续使用。但是当我点击递增或递减时,我同时更改了两个字段中的数据。我知道在 CounterCubit 中我只声明了一个值,它两次传递给同一个函数,因此它发生了变化。告诉我如何正确分离每个字段的值 使得值不会同时在两个字段中发生变化,而只会在一个对应的字段中发生变化?
过滤对话框
Widget build(BuildContext context) {
return SingleChildScrollView(
child: Dialog(
insetPadding: const EdgeInsets.only(top: 100, left: 24, right: 24),
backgroundColor: Colors.transparent,
shape: const RoundedRectangleBorder(
borderRadius: BorderRadius.all(Radius.circular(24))),
child: Container(
width: MediaQuery.of(context).size.width,
decoration: const BoxDecoration(
color: constants.Colors.greyDark,
borderRadius: BorderRadius.all(Radius.circular(24)),
),
child: Padding(
padding: const EdgeInsets.fromLTRB(21, 38, 21, 24),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
const PriceCounter(title: 'From'),
]
价格计数器
Widget build(BuildContext context) {
final CounterCubit cubit = BlocProvider.of<CounterCubit>(context);
return Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Column(
children: [
BlocBuilder<CounterCubit, CounterState>(
builder: (context, state) => InputField(
price: state.countValue.toString(),
textStyle: constants.Styles.normalBookTextStyleWhite),
),
Row(
children: [
IconButton(
onPressed: () => cubit.increment(),
icon: SvgPicture.asset(constants.Assets.plus),
constraints: const BoxConstraints(),
padding: EdgeInsets.zero,
),
const SizedBox(width: 24),
Text(title, style: constants.Styles.smallLtStdTextStyleWhite),
const SizedBox(width: 24),
IconButton(
onPressed: () => cubit.decrement(),
icon: SvgPicture.asset(constants.Assets.minus),
constraints: const BoxConstraints(),
padding: EdgeInsets.zero,
),
],
),
],
),
// const SizedBox(width: 24),
Column(
children: [
BlocBuilder<CounterCubit, CounterState>(
builder: (context, state) => InputField(
price: state.countValue.toString(),
textStyle: constants.Styles.normalBookTextStyleWhite),
),
Row(
children: [
IconButton(
onPressed: () => cubit.increment(),
icon: SvgPicture.asset(constants.Assets.plus),
constraints: const BoxConstraints(),
padding: EdgeInsets.zero,
),
const SizedBox(width: 24),
Text(title, style: constants.Styles.smallLtStdTextStyleWhite),
const SizedBox(width: 24),
IconButton(
onPressed: () => cubit.decrement(),
icon: SvgPicture.asset(constants.Assets.minus),
constraints: const BoxConstraints(),
padding: EdgeInsets.zero,
),
输入字段
class InputField extends StatefulWidget {
final String price;
final TextStyle textStyle;
const InputField({Key? key, required this.price, required this.textStyle})
: super(key: key);
@override
State<InputField> createState() => _InputField();
}
class _InputField extends State<InputField> {
final _formKey = GlobalKey<FormState>();
final _priceController = TextEditingController();
@override
void dispose() {
_priceController.dispose();
super.dispose();
}
@override
Widget build(BuildContext context) => SizedBox(
width: 90,
child: Form(
key: _formKey,
child: TextFormField(
keyboardType: TextInputType.number,
controller: _priceController..text = '€${widget.price} KWh',
style: widget.textStyle,
textAlign: TextAlign.center,
decoration: const InputDecoration(
contentPadding: EdgeInsets.zero,
border: InputBorder.none,
),
),
),
);
}
计数器状态
class CounterState {
final double countValue;
const CounterState({required this.countValue});
}
反肘
class CounterCubit extends Cubit<CounterState> {
CounterCubit() : super(const CounterState(countValue: 0.13));
void increment() => emit(CounterState(countValue: state.countValue + 0.01));
void decrement() => emit(CounterState(countValue: state.countValue - 0.01));
}
这是结果
您将完全相同的状态传递给两个输入:
state.countValue
为什么不直接为另一个输入字段创建另一个状态?
state.firstCountValue
state.secondCountValue
我在函数 Counter 中连续使用。但是当我点击递增或递减时,我同时更改了两个字段中的数据。我知道在 CounterCubit 中我只声明了一个值,它两次传递给同一个函数,因此它发生了变化。告诉我如何正确分离每个字段的值 使得值不会同时在两个字段中发生变化,而只会在一个对应的字段中发生变化?
过滤对话框
Widget build(BuildContext context) {
return SingleChildScrollView(
child: Dialog(
insetPadding: const EdgeInsets.only(top: 100, left: 24, right: 24),
backgroundColor: Colors.transparent,
shape: const RoundedRectangleBorder(
borderRadius: BorderRadius.all(Radius.circular(24))),
child: Container(
width: MediaQuery.of(context).size.width,
decoration: const BoxDecoration(
color: constants.Colors.greyDark,
borderRadius: BorderRadius.all(Radius.circular(24)),
),
child: Padding(
padding: const EdgeInsets.fromLTRB(21, 38, 21, 24),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
const PriceCounter(title: 'From'),
]
价格计数器
Widget build(BuildContext context) {
final CounterCubit cubit = BlocProvider.of<CounterCubit>(context);
return Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Column(
children: [
BlocBuilder<CounterCubit, CounterState>(
builder: (context, state) => InputField(
price: state.countValue.toString(),
textStyle: constants.Styles.normalBookTextStyleWhite),
),
Row(
children: [
IconButton(
onPressed: () => cubit.increment(),
icon: SvgPicture.asset(constants.Assets.plus),
constraints: const BoxConstraints(),
padding: EdgeInsets.zero,
),
const SizedBox(width: 24),
Text(title, style: constants.Styles.smallLtStdTextStyleWhite),
const SizedBox(width: 24),
IconButton(
onPressed: () => cubit.decrement(),
icon: SvgPicture.asset(constants.Assets.minus),
constraints: const BoxConstraints(),
padding: EdgeInsets.zero,
),
],
),
],
),
// const SizedBox(width: 24),
Column(
children: [
BlocBuilder<CounterCubit, CounterState>(
builder: (context, state) => InputField(
price: state.countValue.toString(),
textStyle: constants.Styles.normalBookTextStyleWhite),
),
Row(
children: [
IconButton(
onPressed: () => cubit.increment(),
icon: SvgPicture.asset(constants.Assets.plus),
constraints: const BoxConstraints(),
padding: EdgeInsets.zero,
),
const SizedBox(width: 24),
Text(title, style: constants.Styles.smallLtStdTextStyleWhite),
const SizedBox(width: 24),
IconButton(
onPressed: () => cubit.decrement(),
icon: SvgPicture.asset(constants.Assets.minus),
constraints: const BoxConstraints(),
padding: EdgeInsets.zero,
),
输入字段
class InputField extends StatefulWidget {
final String price;
final TextStyle textStyle;
const InputField({Key? key, required this.price, required this.textStyle})
: super(key: key);
@override
State<InputField> createState() => _InputField();
}
class _InputField extends State<InputField> {
final _formKey = GlobalKey<FormState>();
final _priceController = TextEditingController();
@override
void dispose() {
_priceController.dispose();
super.dispose();
}
@override
Widget build(BuildContext context) => SizedBox(
width: 90,
child: Form(
key: _formKey,
child: TextFormField(
keyboardType: TextInputType.number,
controller: _priceController..text = '€${widget.price} KWh',
style: widget.textStyle,
textAlign: TextAlign.center,
decoration: const InputDecoration(
contentPadding: EdgeInsets.zero,
border: InputBorder.none,
),
),
),
);
}
计数器状态
class CounterState {
final double countValue;
const CounterState({required this.countValue});
}
反肘
class CounterCubit extends Cubit<CounterState> {
CounterCubit() : super(const CounterState(countValue: 0.13));
void increment() => emit(CounterState(countValue: state.countValue + 0.01));
void decrement() => emit(CounterState(countValue: state.countValue - 0.01));
}
这是结果
您将完全相同的状态传递给两个输入:
state.countValue
为什么不直接为另一个输入字段创建另一个状态?
state.firstCountValue
state.secondCountValue