Skip to content

Commit 7af208f

Browse files
author
jackjflin
committed
add：表单提供背景颜色自定义属性
1 parent f9515ad commit 7af208f

File tree

2 files changed

+321
-6
lines changed

2 files changed

+321
-6
lines changed

‎tdesign-component/example/lib/page/td_form_page.dart‎

Lines changed: 311 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -252,6 +252,13 @@ class _TDFormPageState extends State<TDFormPage> {
252252
// ExampleItem(ignoreCode: true, desc: '', builder: (_) => CodeWrapper(builder: _buildCombinationButtons)),
253253
]),
254254
],
255+
test: [
256+
ExampleItem(ignoreCode: true,desc: '自定义背景表单', builder: _buildArrangementSwitch),
257+
ExampleItem(ignoreCode: true,desc: '', builder: _buildSwitchWithBase),
258+
ExampleItem(ignoreCode: true, builder: (BuildContext context) {
259+
return CodeWrapper(builder: _buildCustomForm);
260+
}),
261+
],
255262
);
256263
}
257264

@@ -583,6 +590,310 @@ class _TDFormPageState extends State<TDFormPage> {
583590
]);
584591
}
585592

593+
@Demo(group: 'form')
594+
Widget _buildCustomForm(BuildContext context) {
595+
final theme = TDTheme.of(context);
596+
return TDForm(
597+
formController: _formController,
598+
disabled: _formDisableState,
599+
data: _formData,
600+
isHorizontal: _isFormHorizontal,
601+
rules: _validationRules,
602+
formContentAlign: TextAlign.left,
603+
requiredMark: true,
604+
605+
/// 确定整个表单是否展示提示信息
606+
formShowErrorMessage: true,
607+
onSubmit: onSubmit,
608+
items: [
609+
TDFormItem(
610+
backgroundColor: TDTheme.of(context).brandNormalColor,
611+
label: '用户名',
612+
name: 'name',
613+
type: TDFormItemType.input,
614+
help: '请输入用户名',
615+
labelWidth: 82.0,
616+
formItemNotifier: _formItemNotifier['name'],
617+
618+
/// 控制单个 item 是否展示错误提醒
619+
showErrorMessage: true,
620+
requiredMark: true,
621+
child: TDInput(
622+
leftContentSpace: 0,
623+
inputDecoration: InputDecoration(
624+
hintText: "请输入用户名",
625+
border: InputBorder.none,
626+
contentPadding: EdgeInsets.all(0),
627+
hintStyle: TextStyle(color: TDTheme.of(context).fontGyColor3.withOpacity(0.4))),
628+
controller: _controller[0],
629+
backgroundColor: TDTheme.of(context).brandNormalColor,
630+
additionInfoColor: TDTheme.of(context).errorColor6,
631+
showBottomDivider: false,
632+
readOnly: _formDisableState,
633+
onChanged: (val) {
634+
_formItemNotifier['name']?.upDataForm(val);
635+
},
636+
onClearTap: () {
637+
_controller[0].clear();
638+
_formItemNotifier['name']?.upDataForm("");
639+
}),
640+
),
641+
TDFormItem(
642+
label: '密码',
643+
backgroundColor: TDTheme.of(context).brandNormalColor,
644+
name: 'password',
645+
type: TDFormItemType.input,
646+
labelWidth: 82.0,
647+
formItemNotifier: _formItemNotifier['password'],
648+
showErrorMessage: true,
649+
child: TDInput(
650+
leftContentSpace: 0,
651+
inputDecoration: InputDecoration(
652+
hintText: '请输入密码',
653+
border: InputBorder.none,
654+
hintStyle: TextStyle(color: TDTheme.of(context).fontGyColor3.withOpacity(0.4))),
655+
type: TDInputType.normal,
656+
controller: _controller[1],
657+
obscureText: !browseOn,
658+
backgroundColor: TDTheme.of(context).brandNormalColor,
659+
needClear: false,
660+
readOnly: _formDisableState,
661+
showBottomDivider: false,
662+
onChanged: (val) {
663+
_formItemNotifier['password']?.upDataForm(val);
664+
},
665+
onClearTap: () {
666+
_controller[1].clear();
667+
_formItemNotifier['password']?.upDataForm("");
668+
}),
669+
),
670+
TDFormItem(
671+
label: '性别',
672+
name: 'gender',
673+
backgroundColor: TDTheme.of(context).brandNormalColor,
674+
type: TDFormItemType.radios,
675+
labelWidth: 82.0,
676+
showErrorMessage: true,
677+
formItemNotifier: _formItemNotifier['gender'],
678+
child: TDRadioGroup(
679+
spacing: 0,
680+
direction: Axis.horizontal,
681+
controller: _genderCheckboxGroupController,
682+
directionalTdRadios: _radios.entries.map((entry) {
683+
return TDRadio(
684+
id: entry.key,
685+
title: entry.value,
686+
backgroundColor: TDTheme.of(context).brandNormalColor,
687+
selectColor: TDTheme.of(context).brandFocusColor,
688+
radioStyle: TDRadioStyle.circle,
689+
showDivider: false,
690+
spacing: 4,
691+
checkBoxLeftSpace: 0,
692+
customSpace: EdgeInsets.all(0),
693+
enable: !_formDisableState,
694+
);
695+
}).toList(),
696+
onRadioGroupChange: (ids) {
697+
if (ids == null) {
698+
return;
699+
}
700+
_formItemNotifier['gender']?.upDataForm(ids);
701+
},
702+
),
703+
),
704+
TDFormItem(
705+
label: '生日',
706+
name: 'birth',
707+
backgroundColor: TDTheme.of(context).brandNormalColor,
708+
labelWidth: 82.0,
709+
type: TDFormItemType.dateTimePicker,
710+
contentAlign: TextAlign.left,
711+
tipAlign: TextAlign.left,
712+
formItemNotifier: _formItemNotifier['birth'],
713+
hintText:'请输入内容',
714+
select: _selected_1,
715+
selectFn: (BuildContext context) {
716+
if (_formDisableState) {
717+
return;
718+
}
719+
TDPicker.showDatePicker(context, title: '选择时间', onConfirm: (selected) {
720+
setState(() {
721+
_selected_1 =
722+
'${selected['year'].toString().padLeft(4, '0')}-${selected['month'].toString().padLeft(2, '0')}-${selected['day'].toString().padLeft(2, '0')}';
723+
_formItemNotifier['birth']?.upDataForm(_selected_1);
724+
});
725+
Navigator.of(context).pop();
726+
}, dateStart: [1999, 01, 01], dateEnd: [2050, 12, 31], initialDate: [2012, 1, 1]);
727+
},
728+
),
729+
TDFormItem(
730+
label: '年限',
731+
name: 'age',
732+
labelWidth: 82.0,
733+
backgroundColor: TDTheme.of(context).brandNormalColor,
734+
type: TDFormItemType.stepper,
735+
formItemNotifier: _formItemNotifier['age'],
736+
child: Padding(
737+
padding: EdgeInsets.only( right: 18),
738+
child: TDStepper(
739+
theme: TDStepperTheme.filled,
740+
disabled: _formDisableState,
741+
eventController: _stepController!,
742+
value:int.parse(_formData['age']),
743+
onChange: (value) {
744+
_formItemNotifier['age']?.upDataForm('${value}');
745+
},
746+
),
747+
)),
748+
TDFormItem(
749+
label: '自我评价',
750+
name: 'description',
751+
tipAlign: TextAlign.left,
752+
type: TDFormItemType.rate,
753+
labelWidth: 82.0,
754+
backgroundColor: TDTheme.of(context).brandNormalColor,
755+
formItemNotifier: _formItemNotifier['description'],
756+
child: Align(
757+
alignment: Alignment.centerLeft,
758+
child: Padding(
759+
padding: EdgeInsets.only(right: 18),
760+
child: TDRate(
761+
count: 5,
762+
value: double.parse(_formData['description']),
763+
allowHalf: false,
764+
disabled: _formDisableState,
765+
onChange: (value) {
766+
setState(() {
767+
_formData['description'] = '${value}';
768+
});
769+
_formItemNotifier['description']?.upDataForm('${value}');
770+
},
771+
)),
772+
),
773+
),
774+
TDFormItem(
775+
label: '个人简介',
776+
labelWidth: 82.0,
777+
name: 'resume',
778+
type: TDFormItemType.textarea,
779+
backgroundColor: TDTheme.of(context).brandNormalColor,
780+
formItemNotifier: _formItemNotifier['resume'],
781+
child: Padding(
782+
padding: EdgeInsets.only(top: _isFormHorizontal?0:8,bottom: 4),
783+
child: TDTextarea(
784+
backgroundColor: Colors.red,
785+
padding: EdgeInsets.all(0),
786+
hintText: '请输入个人简介',
787+
maxLength: 500,
788+
indicator: true,
789+
readOnly: _formDisableState,
790+
layout: TDTextareaLayout.vertical,
791+
controller: _controller[2],
792+
showBottomDivider: false,
793+
onChanged: (value) {
794+
_formItemNotifier['resume']?.upDataForm(value);
795+
},
796+
),
797+
)),
798+
TDFormItem(
799+
label: '上传图片',
800+
name: 'photo',
801+
labelWidth: 82.0,
802+
backgroundColor: TDTheme.of(context).brandNormalColor,
803+
type: TDFormItemType.upLoadImg,
804+
formItemNotifier: _formItemNotifier['photo'],
805+
child: Padding(
806+
padding: EdgeInsets.only(top:4,bottom: 4),
807+
child: TDUpload(
808+
files: files,
809+
multiple: true,
810+
max: 6,
811+
onError: print,
812+
onValidate: print,
813+
disabled: _formDisableState,
814+
onChange: ((imgList, type) {
815+
if (_formDisableState) {
816+
return;
817+
}
818+
files = _onValueChanged(files ?? [], imgList, type);
819+
List imgs = files.map((e) => e.remotePath ?? e.assetPath).toList();
820+
setState(() {
821+
_formItemNotifier['photo'].upDataForm(imgs.join(','));
822+
});
823+
}),
824+
),
825+
))
826+
],
827+
btnGroup: [
828+
Container(
829+
decoration: BoxDecoration(
830+
color: TDTheme.of(context).brandNormalColor,
831+
),
832+
child: Padding(
833+
padding: const EdgeInsets.all(16),
834+
child: Row(
835+
children: [
836+
Expanded(
837+
child: TDButton(
838+
text: '重置',
839+
size: TDButtonSize.large,
840+
type: TDButtonType.fill,
841+
theme: TDButtonTheme.light,
842+
shape: TDButtonShape.rectangle,
843+
disabled: _formDisableState,
844+
onTap: () {
845+
//用户名称
846+
_controller[0].clear();
847+
//密码
848+
_controller[1].clear();
849+
// 性别
850+
_genderCheckboxGroupController.toggle('', false);
851+
//个人简介
852+
_controller[2].clear();
853+
//生日
854+
_selected_1 = '';
855+
//籍贯
856+
_selected_2 = '';
857+
//年限
858+
_stepController.add(TDStepperEventType.cleanValue);
859+
//上传图片
860+
files.clear();
861+
_formData = {
862+
"name": '',
863+
"password": '',
864+
"gender": '',
865+
"birth": '',
866+
"place": '',
867+
"age": "0",
868+
"description": "2",
869+
"resume": '',
870+
"photo": ''
871+
};
872+
_formData.forEach((key, value) {
873+
_formItemNotifier[key].upDataForm(value);
874+
});
875+
_formController.reset(_formData);
876+
setState(() {});
877+
},
878+
)),
879+
SizedBox(
880+
width: 20,
881+
),
882+
Expanded(
883+
child: TDButton(
884+
text: '提交',
885+
size: TDButtonSize.large,
886+
type: TDButtonType.fill,
887+
theme: TDButtonTheme.primary,
888+
shape: TDButtonShape.rectangle,
889+
onTap: _onSubmit,
890+
disabled: _formDisableState)),
891+
],
892+
)),
893+
)
894+
]);
895+
}
896+
586897
List<TDUploadFile> _onValueChanged(List<TDUploadFile> fileList, List<TDUploadFile> value, TDUploadType event) {
587898
switch (event) {
588899
case TDUploadType.add:

‎tdesign-component/lib/src/components/form/td_form_item.dart‎

Lines changed: 10 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -29,6 +29,7 @@ class TDFormItem extends StatefulWidget {
2929
this.select = '',
3030
this.selectFn,
3131
this.hintText = '',
32+
this.backgroundColor,
3233
Map<String, String>? radios,
3334
Key? key,
3435
}) : super(key: key);
@@ -94,6 +95,9 @@ class TDFormItem extends StatefulWidget {
9495

9596
///提示内容
9697
final hintText;
98+
99+
/// 背景色
100+
final Color? backgroundColor;
97101
@override
98102
_TDFormItemState createState() => _TDFormItemState();
99103
}
@@ -301,7 +305,7 @@ class _TDFormItemState extends State<TDFormItem> {
301305
case TDFormItemType.rate:
302306
return Container(
303307
decoration: BoxDecoration(
304-
color: TDTheme.of(context).whiteColor1,
308+
color: widget.backgroundColor ?? TDTheme.of(context).whiteColor1,
305309
),
306310
child: Padding(
307311
padding: const EdgeInsets.all(16),
@@ -325,7 +329,7 @@ class _TDFormItemState extends State<TDFormItem> {
325329
case TDFormItemType.radios:
326330
return Container(
327331
decoration: BoxDecoration(
328-
color: TDTheme.of(context).whiteColor1,
332+
color: widget.backgroundColor ?? TDTheme.of(context).whiteColor1,
329333
),
330334
child: Padding(
331335
padding: const EdgeInsets.all(16),
@@ -352,7 +356,7 @@ class _TDFormItemState extends State<TDFormItem> {
352356
case TDFormItemType.stepper:
353357
return Container(
354358
decoration: BoxDecoration(
355-
color: theme.whiteColor1,
359+
color: widget.backgroundColor ?? theme.whiteColor1,
356360
),
357361
child: Padding(
358362
padding: const EdgeInsets.all(16),
@@ -375,7 +379,7 @@ class _TDFormItemState extends State<TDFormItem> {
375379
case TDFormItemType.textarea:
376380
return Container(
377381
decoration: BoxDecoration(
378-
color: TDTheme.of(context).whiteColor1,
382+
color: widget.backgroundColor ?? TDTheme.of(context).whiteColor1,
379383
),
380384
child: Padding(
381385
padding: const EdgeInsets.all(16),
@@ -409,7 +413,7 @@ class _TDFormItemState extends State<TDFormItem> {
409413
)));
410414
case TDFormItemType.upLoadImg:
411415
return Container(
412-
decoration: BoxDecoration(color: theme.whiteColor1),
416+
decoration: BoxDecoration(color: widget.backgroundColor ?? theme.whiteColor1),
413417
child: Padding(
414418
padding: const EdgeInsets.all(16),
415419
child: Column(
@@ -492,7 +496,7 @@ class _TDFormItemState extends State<TDFormItem> {
492496
}
493497
},
494498
child: Container(
495-
color: TDTheme.of(context).whiteColor1,
499+
color: widget.backgroundColor ?? TDTheme.of(context).whiteColor1,
496500
padding: const EdgeInsets.all(16),
497501
child: Column(
498502
crossAxisAlignment: CrossAxisAlignment.start,

0 commit comments

Comments
 (0)