flutter - Flutter - TextFormField 扩展无法正常工作
问题描述
我正在尝试创建自己的 TextFieldForm 以通过特定设计在我的应用程序中使用,如果是这种情况,我会遇到一些麻烦来扩展它。
目前,它看起来像这样:
但这实际上应该是这样的:
据我了解,为了做到这一点,我应该将expands参数设置为TRUE 并将maxLines设置为minLines为NULL。
这应该看起来像这样:
expands: this.expand,
minLines: this.expand ? null : 1,
maxLines: this.expand ? null : 1,
问题是我遇到了一个有趣的错误:
══╡ EXCEPTION CAUGHT BY RENDERING LIBRARY ╞═════════════════════════════════════════════════════════
The following assertion was thrown during performLayout():
BoxConstraints forces an infinite height.
These invalid constraints were provided to RenderCustomPaint's layout() function by the following
function, which probably computed the invalid constraints in question:
_RenderDecoration.performLayout (package:flutter/src/material/input_decorator.dart:1298:17)
The offending constraints were:
BoxConstraints(w=289.8, h=Infinity)
我提交的自定义文本表单的代码:
class CustomTextField extends StatelessWidget {
final String text;
final String helperText;
final double primaryFontSize;
final double secondaryFontSize;
final bool isPassword;
final String Function(String) validator;
final TextInputType keyboardType;
final bool expand;
String capitalize(String s) => s[0].toUpperCase() + s.substring(1);
const CustomTextField({
@required this.text,
this.primaryFontSize = 20,
this.secondaryFontSize = 16,
this.isPassword = false,
this.validator,
this.keyboardType = TextInputType.text,
this.helperText,
this.expand = false,
});
@override
Widget build(BuildContext context) {
String _helperText = this.helperText ?? this.text;
return Column(children: [
TextFormField(
expands: this.expand,
minLines: this.expand ? null : 1,
maxLines: this.expand ? null : 1,
keyboardType: keyboardType,
validator: validator,
obscureText: isPassword,
decoration: InputDecoration(
errorStyle: TextStyle(
fontSize: secondaryFontSize, fontWeight: FontWeight.bold),
border: InputBorder.none,
hintText: capitalize(text),
hintStyle: TextStyle(color: AppColor.fontColor),
),
style: new TextStyle(
fontSize: primaryFontSize,
color: AppColor.fontColor,
fontWeight: FontWeight.bold),
),
Row(
children: [
Expanded(
flex: 1,
child: Divider(
color: AppColor.grayOutFontColor,
thickness: 2,
)),
SizedBox(width: 10),
Text(
_helperText,
style: new TextStyle(
fontSize: secondaryFontSize,
color: AppColor.grayOutFontColor,
fontWeight: FontWeight.bold),
),
SizedBox(width: 10),
Expanded(
flex: 9,
child: Divider(color: AppColor.grayOutFontColor, thickness: 2)),
],
mainAxisAlignment: MainAxisAlignment.start,
)
]);
}
}
自定义文本表单域的USED:
CustomTextField(
expand: true,
text:
"British chef, restaurateur, write, television, personality, food city, and former footballer."
"Born in Johnston, Scotland.",
primaryFontSize: correctPrimaryFontSize * 0.8,
secondaryFontSize: correctSecondaryFontSize,
helperText: "about you",
keyboardType: TextInputType.multiline,
),
你们中的任何人都可以向我解释我做错了什么吗?或者我不明白它在做什么扩展?
解决方案
我通过添加一个名为“expand”的参数找到了我的问题的答案,我正在检查该参数是否为真我会做
minLines: null,
maxLines: !this.expand ? 1 : null,
maxLength: !this.expand ? null : 200,
完整的代码是:
import 'package:flutter/material.dart';
import 'package:FlutterApp_V2/apps_color/apps_color.dart';
class CustomTextField extends StatelessWidget {
final String text;
final String helperText;
final double primaryFontSize;
final double secondaryFontSize;
final bool isPassword;
final String Function(String) validator;
final TextInputType keyboardType;
final bool expand;
String capitalize(String s) => s[0].toUpperCase() + s.substring(1);
const CustomTextField({
@required this.text,
this.primaryFontSize = 20,
this.secondaryFontSize = 16,
this.isPassword = false,
this.validator,
this.keyboardType = TextInputType.text,
this.helperText,
this.expand = false,
});
@override
Widget build(BuildContext context) {
String _helperText = this.helperText ?? this.text;
return Column(children: [
TextFormField(
minLines: null,
maxLines: !this.expand ? 1 : null,
maxLength: !this.expand ? null : 200,
keyboardType: keyboardType,
validator: validator,
obscureText: isPassword,
decoration: InputDecoration(
errorStyle: TextStyle(
fontSize: secondaryFontSize, fontWeight: FontWeight.bold),
border: InputBorder.none,
hintText: capitalize(text),
hintStyle: TextStyle(color: AppColor.fontColor),
),
style: new TextStyle(
fontSize: primaryFontSize,
color: AppColor.fontColor,
fontWeight: FontWeight.bold),
),
Row(
children: [
Expanded(
flex: 1,
child: Divider(
color: AppColor.grayOutFontColor,
thickness: 2,
)),
SizedBox(width: 10),
Text(
_helperText,
style: new TextStyle(
fontSize: secondaryFontSize,
color: AppColor.grayOutFontColor,
fontWeight: FontWeight.bold),
),
SizedBox(width: 10),
Expanded(
flex: 9,
child: Divider(color: AppColor.grayOutFontColor, thickness: 2)),
],
mainAxisAlignment: MainAxisAlignment.start,
)
]);
}
}
推荐阅读
- swift - Swift:如何使用 HTTPS 代理
- python - 为什么 pygame 中的组列表必须具有“更新”功能,而没有其他功能?
- python - FileNotFoundError: [Errno 2] No such file or directory (尝试将 PDF 文件更改为 CSV 文件)
- python - python迭代选择仅字符串包含某些字符
- powershell - 隐藏 Add-RdServer 的进度条
- css - 如何在 reactjs 中从道具中添加图像背景
- python - 验证 sqlalchemy 中的列表修改
- android - 无法识别 USB 设备(例如物理键盘)到智能手机 Sony Xperia Z3+ e6553 的热插拔
- javascript - 使用 javaScript 调用一些函数的 html 表单
- python - 在 PyCharm、windows 上安装 Kivy 时出现问题