我正在尝试创建一个带有前缀文本的文本表单字段,如下图所示。这是在输入任何文本之前
这是输入文本后的
这是我写的代码
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),
),
),
),
关于Flutter Textformfield 前缀文本,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/71310866/