我正在尝试创建一个带有前缀文本的文本表单字段,如下图所示。这是在输入任何文本之前
这是输入文本后的
这是我写的代码
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),
),
),
),
我想实现接近前两张图片的效果,我可以在代码中更改什么
将
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),
),
),
),
尝试用一列将文本小部件包裹在
prefixIcon: Text('+254',
中,并为其主轴对齐设置一个中心。或者用 Center
小部件包裹您的文本小部件。
只需添加这一行...
suffixIconConstraints: const BoxConstraints(minHeight: 0)