diff --git a/tdesign-component/example/assets/api/input_api.md b/tdesign-component/example/assets/api/input_api.md index 019509b1e..50c2a4c0a 100644 --- a/tdesign-component/example/assets/api/input_api.md +++ b/tdesign-component/example/assets/api/input_api.md @@ -37,6 +37,7 @@ | leftLabelStyle | TextStyle? | - | 左侧标签样式 设置该值是若出现像素溢出,请设置letterSpacing: 0 | | maxLength | int? | 500 | 最大字数限制 | | maxLines | int? | 1 | 最大输入行数 | +| minLines | int? | 1 | 最小输入行数 | | needClear | bool | true | 是否需要右侧按钮变为删除 | | obscureText | bool | false | 是否隐藏输入的文字,一般用在密码输入框中 | | onBtnTap | GestureTapCallback? | - | 右侧按钮点击 | diff --git a/tdesign-component/example/assets/code/input._minLinesInput.txt b/tdesign-component/example/assets/code/input._minLinesInput.txt new file mode 100644 index 000000000..fe2adcbcf --- /dev/null +++ b/tdesign-component/example/assets/code/input._minLinesInput.txt @@ -0,0 +1,17 @@ + + Widget _minLinesInput(BuildContext context) { + return TInput( + leftLabel: '备注', + controller: controller[28], + hintText: '请输入至少两行高度的内容', + maxLines: 4, + minLines: 2, + onChanged: (text) { + setState(() {}); + }, + onClearTap: () { + controller[28].clear(); + setState(() {}); + }, + ); + } diff --git a/tdesign-component/example/lib/page/t_input_page.dart b/tdesign-component/example/lib/page/t_input_page.dart index 20545af89..d586fe78b 100644 --- a/tdesign-component/example/lib/page/t_input_page.dart +++ b/tdesign-component/example/lib/page/t_input_page.dart @@ -114,7 +114,8 @@ class _TInputViewPageState extends State { ExampleItem( desc: '获取焦点时点击外部区域事件响应-onTapOutside', builder: _onTapOutside), ExampleItem( - desc: '设置contentPadding内容与分割线对齐', builder: _contentPadding) + desc: '设置contentPadding内容与分割线对齐', builder: _contentPadding), + ExampleItem(desc: '设置最小输入行数', builder: _minLinesInput), ], ); }; @@ -973,6 +974,24 @@ class _TInputViewPageState extends State { ); } + @Demo(group: 'input') + Widget _minLinesInput(BuildContext context) { + return TInput( + leftLabel: '备注', + controller: controller[28], + hintText: '请输入至少两行高度的内容', + maxLines: 4, + minLines: 2, + onChanged: (text) { + setState(() {}); + }, + onClearTap: () { + controller[28].clear(); + setState(() {}); + }, + ); + } + @Demo(group: 'input') Widget _autoHeightInput(BuildContext context) { return Column( diff --git a/tdesign-component/lib/src/components/input/t_input.dart b/tdesign-component/lib/src/components/input/t_input.dart index faab5c403..b3e5cc0b0 100644 --- a/tdesign-component/lib/src/components/input/t_input.dart +++ b/tdesign-component/lib/src/components/input/t_input.dart @@ -41,6 +41,7 @@ class TInput extends StatelessWidget { this.inputFormatters, this.inputDecoration, this.maxLines = 1, + this.minLines = 1, this.focusNode, this.controller, this.cursorColor, @@ -124,6 +125,9 @@ class TInput extends StatelessWidget { /// 最大输入行数 final int? maxLines; + /// 最小输入行数 + final int? minLines; + /// 获取或者取消焦点使用 final FocusNode? focusNode; @@ -417,6 +421,7 @@ class TInput extends StatelessWidget { inputFormatters: inputFormatters, inputDecoration: inputDecoration, maxLines: maxLines, + minLines: minLines, maxLength: maxLength, focusNode: focusNode, isCollapsed: true, @@ -656,6 +661,7 @@ class TInput extends StatelessWidget { inputDecoration: inputDecoration, isCollapsed: true, maxLines: maxLines, + minLines: minLines, focusNode: focusNode, hintTextStyle: hintTextStyle ?? TextStyle( @@ -783,6 +789,7 @@ class TInput extends StatelessWidget { [LengthLimitingTextInputFormatter(maxLength)], inputDecoration: inputDecoration, maxLines: maxLines, + minLines: minLines, focusNode: focusNode, hintTextStyle: hintTextStyle ?? TextStyle(color: TTheme.of(context).textColorPlaceholder), @@ -872,6 +879,7 @@ class TInput extends StatelessWidget { inputFormatters: inputFormatters, inputDecoration: inputDecoration, maxLines: maxLines, + minLines: minLines, focusNode: focusNode, isCollapsed: true, hintTextStyle: hintTextStyle ?? diff --git a/tdesign-component/test/t_input_test.dart b/tdesign-component/test/t_input_test.dart new file mode 100644 index 000000000..503129aba --- /dev/null +++ b/tdesign-component/test/t_input_test.dart @@ -0,0 +1,35 @@ +import 'package:flutter/material.dart'; +import 'package:flutter_test/flutter_test.dart'; +import 'package:tdesign_flutter/tdesign_flutter.dart'; + +Widget _buildTestApp(Widget child) { + return TTheme( + data: TThemeData.defaultData(), + child: MaterialApp( + home: Scaffold( + body: child, + ), + ), + ); +} + +void main() { + group('TInput', () { + testWidgets('透传 minLines 到内部 TextField', (tester) async { + await tester.pumpWidget( + _buildTestApp( + TInput( + leftLabel: '标签文字', + hintText: '请输入文字', + maxLines: 4, + minLines: 2, + ), + ), + ); + + final textField = tester.widget(find.byType(TextField)); + expect(textField.maxLines, 4); + expect(textField.minLines, 2); + }); + }); +} diff --git a/tdesign-site/src/input/README.md b/tdesign-site/src/input/README.md index c66dd4440..567d61e2c 100644 --- a/tdesign-site/src/input/README.md +++ b/tdesign-site/src/input/README.md @@ -1052,6 +1052,7 @@ import 'package:tdesign_flutter/tdesign_flutter.dart'; | leftLabelStyle | TextStyle? | - | 左侧标签样式 设置该值是若出现像素溢出,请设置letterSpacing: 0 | | maxLength | int? | 500 | 最大字数限制 | | maxLines | int? | 1 | 最大输入行数 | +| minLines | int? | 1 | 最小输入行数 | | needClear | bool | true | 是否需要右侧按钮变为删除 | | obscureText | bool | false | 是否隐藏输入的文字,一般用在密码输入框中 | | onBtnTap | GestureTapCallback? | - | 右侧按钮点击 |