Flutter Textformfield 前缀文本
Flutter Textformfield prefix text
我正在尝试创建一个带有前缀文本的文本表单域,如下图所示。这是在输入任何文本之前
这是在输入文字后
这是我写的代码
TextFormField(
decoration: InputDecoration(
prefixIcon: Text(
'+254',
textAlign: TextAlign.center,
style: theme.textTheme.bodyText2!.copyWith(
color: Color(0xff000000),
fontWeight: FontWeight.w500),
),
hintText: getTranslated(context, "label_hint")!,
hintStyle: theme.textTheme.bodyText2!.copyWith(
color: primaryLight.withOpacity(0.75),
fontWeight: FontWeight.w400,
),
fillColor: const Color(0xffF5F5F5),
enabledBorder: OutlineInputBorder(
borderSide:
const BorderSide(width: 1, color: Color(0xffCCCCCC)),
borderRadius: BorderRadius.circular(5),
),
focusedBorder: OutlineInputBorder(
borderSide: const BorderSide(width: 1, color: Color(0xffF38E30)),
borderRadius: BorderRadius.circular(5),
),
),
),
这是我尝试的样子
我想实现接近前两张图片的效果,我可以在我的代码中更改什么
尝试用一列包裹 prefixIcon: Text('+254',
中的文本小部件,并为其主轴对齐设置一个中心。或者用 Center
小部件包装您的文本小部件。
将 Text
小部件包装在 Row
小部件中,并将其 mainAxisSize
属性 分配给 MainAxisSize.min
和 mainAxisAlignment
属性到 mainAxisAlignment.center
实现与提示文本
内联的 prefixText
试试这个代码 -
TextFormField(
decoration: InputDecoration(
prefixIcon: Row(
mainAxisSize: MainAxisSize.min,
mainAxisAlignment: MainAxisAlignment.center,
children: const [
Text(
'+254',
style: TextStyle(
color: Colors.black,
fontWeight: FontWeight.w400,
),
),
],
),
hintText: 'mobile number',
hintStyle: const TextStyle(
color: Colors.grey,
fontWeight: FontWeight.w400,
),
fillColor: const Color(0xffF5F5F5),
enabledBorder: OutlineInputBorder(
borderSide:
const BorderSide(width: 1, color: Color(0xffCCCCCC)),
borderRadius: BorderRadius.circular(5),
),
focusedBorder: OutlineInputBorder(
borderSide:
const BorderSide(width: 1, color: Color(0xffF38E30)),
borderRadius: BorderRadius.circular(5),
),
),
),
我正在尝试创建一个带有前缀文本的文本表单域,如下图所示。这是在输入任何文本之前
这是在输入文字后
这是我写的代码
TextFormField(
decoration: InputDecoration(
prefixIcon: Text(
'+254',
textAlign: TextAlign.center,
style: theme.textTheme.bodyText2!.copyWith(
color: Color(0xff000000),
fontWeight: FontWeight.w500),
),
hintText: getTranslated(context, "label_hint")!,
hintStyle: theme.textTheme.bodyText2!.copyWith(
color: primaryLight.withOpacity(0.75),
fontWeight: FontWeight.w400,
),
fillColor: const Color(0xffF5F5F5),
enabledBorder: OutlineInputBorder(
borderSide:
const BorderSide(width: 1, color: Color(0xffCCCCCC)),
borderRadius: BorderRadius.circular(5),
),
focusedBorder: OutlineInputBorder(
borderSide: const BorderSide(width: 1, color: Color(0xffF38E30)),
borderRadius: BorderRadius.circular(5),
),
),
),
这是我尝试的样子
我想实现接近前两张图片的效果,我可以在我的代码中更改什么
尝试用一列包裹 prefixIcon: Text('+254',
中的文本小部件,并为其主轴对齐设置一个中心。或者用 Center
小部件包装您的文本小部件。
将 Text
小部件包装在 Row
小部件中,并将其 mainAxisSize
属性 分配给 MainAxisSize.min
和 mainAxisAlignment
属性到 mainAxisAlignment.center
实现与提示文本
试试这个代码 -
TextFormField(
decoration: InputDecoration(
prefixIcon: Row(
mainAxisSize: MainAxisSize.min,
mainAxisAlignment: MainAxisAlignment.center,
children: const [
Text(
'+254',
style: TextStyle(
color: Colors.black,
fontWeight: FontWeight.w400,
),
),
],
),
hintText: 'mobile number',
hintStyle: const TextStyle(
color: Colors.grey,
fontWeight: FontWeight.w400,
),
fillColor: const Color(0xffF5F5F5),
enabledBorder: OutlineInputBorder(
borderSide:
const BorderSide(width: 1, color: Color(0xffCCCCCC)),
borderRadius: BorderRadius.circular(5),
),
focusedBorder: OutlineInputBorder(
borderSide:
const BorderSide(width: 1, color: Color(0xffF38E30)),
borderRadius: BorderRadius.circular(5),
),
),
),