如何格式化FormBuilderRate(Flutter Form Builder包)? [英] How to format FormBuilderRate (Flutter Form Builder package)?
本文介绍了如何格式化FormBuilderRate(Flutter Form Builder包)?的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我正在尝试在flutter_form_builder软件包中格式化FormBuilderRate的外观(
代码如下:
RichText(文字:TextSpan(样式:TextStyle(颜色:Colors.blue，)，子代:< TextSpan> [TextSpan(文本:'[7]在1到5星的等级上，以5为最佳，您如何评价以下各项:'，//被裁剪的这座房子"样式:TextStyle(fontWeight:FontWeight.bold，fontSize:16.0，)，)，TextSpan(文本:'(可选)'，//放置2个空格，而不是"\ n(换行符)样式:TextStyle(fontWeight:FontWeight.normal，fontStyle:FontStyle.italic，fontSize:14.0，颜色:Colors.black54，)，//是误导或不正确的?"，)，]，)，)，SizedBox(高度:6.0，)，填充(填充:const EdgeInsets.only(left:1.0)，子代:FormBuilderRate(属性:"zzz"，装饰:const InputDecoration(//labelText:'FormBuilderRate'，前缀:Text("Wwwwwwwwww"，样式:TextStyle(字号:16)，)，)，initialValue:0，fillColor:Color(0xffFFB900)，//稍后:使用starIconColoremptyIcon:Icons.star_border_outlined，emptyColor:Color(0xffFFB900)，//稍后:使用starIconColorisHalfAllowed:正确，halfFilledIcon:Icons.star_half，halfFilledColor:Color(0xffFFB900)，//稍后:使用starIconColoriconSize:32.0，)，)，填充(填充:const EdgeInsets.only(左:67.0)，子代:FormBuilderRate(属性:"zzz"，装饰:const InputDecoration(//labelText:"FormBuilderRate-厨房:"，floatLabelBehavior:FloatingLabelBehavior.auto，前缀:Text('Xxxxxxx'，样式:TextStyle(字号:16)，)，)，initialValue:0，fillColor:Color(0xffFFB900)，//稍后:使用starIconColoremptyIcon:Icons.star_border_outlined，emptyColor:Color(0xffFFB900)，//稍后:使用starIconColorisHalfAllowed:正确，halfFilledIcon:Icons.star_half，halfFilledColor:Color(0xffFFB900)，//稍后:使用starIconColoriconSize:32.0，)，)，填充(填充:const EdgeInsets.only(left:30.0)，子代:FormBuilderRate(属性:"zzz"，装饰:const InputDecoration(//labelText:"FormBuilderRate-厨房:"，floatLabelBehavior:FloatingLabelBehavior.auto，前缀:Text('Yyyyyyyyyyy'，样式:TextStyle(字号:16)，)，)，initialValue:0，fillColor:Color(0xffFFB900)，//稍后:使用starIconColoremptyIcon:Icons.star_border_outlined，emptyColor:Color(0xffFFB900)，//稍后:使用starIconColorisHalfAllowed:正确，halfFilledIcon:Icons.star_half，halfFilledColor:Color(0xffFFB900)，//稍后:使用starIconColoriconSize:32.0，)，)，填充(填充:const EdgeInsets.only(左:56.0)，子代:FormBuilderRate(属性:"zzz"，装饰:const InputDecoration(//labelText:"FormBuilderRate-厨房:"，floatLabelBehavior:FloatingLabelBehavior.auto，前缀:Text('Zzzzzzzz'，样式:TextStyle(字号:16)，)，)，initialValue:0，fillColor:Color(0xffFFB900)，//稍后:使用starIconColoremptyIcon:Icons.star_border_outlined，emptyColor:Color(0xffFFB900)，//稍后:使用starIconColorisHalfAllowed:正确，halfFilledIcon:Icons.star_half，halfFilledColor:Color(0xffFFB900)，//稍后:使用starIconColoriconSize:32.0，)，)， 更新#1，给出部分答案:
@Miller在下面使用 InputDecoration(border:InputBorder.none)的答案删除了这些行，但未解决了前缀文本和星号对齐的问题.
即使如此，这是 partial 解决方案代码:
Row(mainAxisAlignment:MainAxisAlignment.end，孩子们: [灵活的(弹性:1，子代:FormBuilderRate(属性:"www"，装饰:const InputDecoration(边框:InputBorder.none，前缀:Text(行+灵活的Wwww"，样式:TextStyle(字号:16)，textAlign:TextAlign.end，)，)，initialValue:0，fillColor:Color(0xffFFB900)，//稍后:使用starIconColoremptyIcon:Icons.star_border_outlined，emptyColor:Color(0xffFFB900)，//稍后:使用starIconColorisHalfAllowed:正确，halfFilledIcon:Icons.star_half，halfFilledColor:Color(0xffFFB900)，//稍后:使用starIconColoriconSize:32.0，)，)，]，)，排(mainAxisAlignment:MainAxisAlignment.end，孩子们: [灵活的(弹性:1，子代:FormBuilderRate(属性:"Xxxx"，装饰:const InputDecoration(边框:InputBorder.none，前缀:Text(行+灵活"，样式:TextStyle(字号:16)，textAlign:TextAlign.end，)，)，initialValue:0，fillColor:Color(0xffFFB900)，//稍后:使用starIconColoremptyIcon:Icons.star_border_outlined，emptyColor:Color(0xffFFB900)，//稍后:使用starIconColorisHalfAllowed:正确，halfFilledIcon:Icons.star_half，halfFilledColor:Color(0xffFFB900)，//稍后:使用starIconColoriconSize:32.0，)，)，]，)，填充(填充:const EdgeInsets.only(left:30.0)，子代:FormBuilderRate(属性:"yyy"，装饰:const InputDecoration(边框:InputBorder.none，前缀:Text('Yyyyyyyyyyy'，样式:TextStyle(字号:16)，)，)，initialValue:0，fillColor:Color(0xffFFB900)，//稍后:使用starIconColoremptyIcon:Icons.star_border_outlined，emptyColor:Color(0xffFFB900)，//稍后:使用starIconColorisHalfAllowed:正确，halfFilledIcon:Icons.star_half，halfFilledColor:Color(0xffFFB900)，//稍后:使用starIconColoriconSize:32.0，)，)，填充(填充:const EdgeInsets.only(左:56.0)，子代:FormBuilderRate(属性:"zzz"，装饰:const InputDecoration(边框:InputBorder.none，前缀:Text('ZzzzzzzZ'，样式:TextStyle(字号:16)，)，)，initialValue:0，fillColor:Color(0xffFFB900)，//稍后:使用starIconColoremptyIcon:Icons.star_border_outlined，emptyColor:Color(0xffFFB900)，//稍后:使用starIconColorisHalfAllowed:正确，halfFilledIcon:Icons.star_half，halfFilledColor:Color(0xffFFB900)，//稍后:使用starIconColoriconSize:32.0，)，)， 这是Android模拟器中的样子(前两个评级行使用@Miller的方法，该方法不能解决#2前缀垂直文本对齐问题):
更新#2:解决了将前缀文本与星号垂直对齐的问题:
基于@Joe Muller的
我的原始问题中剩下的是#3:如何使前缀Text的所有四个实例的右侧与评级星星的左侧对齐，前缀Text和最左边的星星之间的间隙越来越小(现在)我使用的是hackey填充:const EdgeInsets.only方法)
解决方案
-
要更改字段的下划线，可以使用
InputDecoration的border属性.例如，要删除整个下划线:border:InputBorder.none -
&3.请注意，FormFields像许多其他小部件一样，倾向于采用其父小部件的所有可用宽度.因此，我建议在Text和FormBuilderRate之间使用一行，以便更好地控制小部件的位置.像这样:
Row(mainAxisAlignment:MainAxisAlignment.end，孩子们: [灵活的(弹性:1，子代:文字("Wwwwwwwwww"，样式:TextStyle(fontSize:16)，textAlign:TextAlign.end，)，)，灵活的(弹性:1，子代:FormBuilderRate(属性:"zzz"，装饰:const InputDecoration(边框:InputBorder.none)，initialValue:0，fillColor:颜色(0xffFFB900)，emptyIcon:Icons.star_border_outlined，emptyColor:颜色(0xffFFB900)，isHalfAllowed:正确，halfFilledIcon:Icons.star_half，halfFilledColor:颜色(0xffFFB900)，iconSize:32.0，)，)，]，)， I'm trying to format the appearance of FormBuilderRate within the flutter_form_builder package (link to package on pub.dev).
Specifically,
- How to eliminate or change the format of horizontal lines between items
- How to vertically align prefix Text (e.g., "Wwww..." in the screenshot below) with bottom or center of rating stars
- How to align right side of all four instances of prefix Text AND the left side of the rating stars, with a tighter gap between the prefix Text and left-most star (right now I'm using a hackey
padding: const EdgeInsets.onlyapproach)
Here's the code:
RichText(
text: TextSpan(
style: TextStyle(
color: Colors.blue,
),
children: <TextSpan>[
TextSpan(
text:
'[ 7 ] On a 1 - 5 star scale, with 5 being the best, how would you rate each of the following: ', // clipped " for this house"
style: TextStyle(
fontWeight: FontWeight.bold,
fontSize: 16.0,
),
),
TextSpan(
text:
' (optional)', // put 2 spaces instead of "\n (line break)
style: TextStyle(
fontWeight: FontWeight.normal,
fontStyle: FontStyle.italic,
fontSize: 14.0,
color: Colors.black54,
), // was 'misleading or inaccurate?',
),
],
),
),
SizedBox(
height: 6.0,
),
Padding(
padding: const EdgeInsets.only(left: 1.0),
child: FormBuilderRate(
attribute: 'zzz',
decoration: const InputDecoration(
// labelText: 'FormBuilderRate',
prefix: Text(
'Wwwwwwwwww',
style: TextStyle(
fontSize: 16,
),
),
),
initialValue: 0,
filledColor:
Color(0xffFFB900), // later: use starIconColor
emptyIcon: Icons.star_border_outlined,
emptyColor:
Color(0xffFFB900), // later: use starIconColor
isHalfAllowed: true,
halfFilledIcon: Icons.star_half,
halfFilledColor:
Color(0xffFFB900), // later: use starIconColor
iconSize: 32.0,
),
),
Padding(
padding: const EdgeInsets.only(left: 67.0),
child: FormBuilderRate(
attribute: 'zzz',
decoration: const InputDecoration(
//labelText: 'FormBuilderRate - kitchen:',
floatingLabelBehavior: FloatingLabelBehavior.auto,
prefix: Text(
'Xxxxxxx',
style: TextStyle(
fontSize: 16,
),
),
),
initialValue: 0,
filledColor:
Color(0xffFFB900), // later: use starIconColor
emptyIcon: Icons.star_border_outlined,
emptyColor:
Color(0xffFFB900), // later: use starIconColor
isHalfAllowed: true,
halfFilledIcon: Icons.star_half,
halfFilledColor:
Color(0xffFFB900), // later: use starIconColor
iconSize: 32.0,
),
),
Padding(
padding: const EdgeInsets.only(left: 30.0),
child: FormBuilderRate(
attribute: 'zzz',
decoration: const InputDecoration(
//labelText: 'FormBuilderRate - kitchen:',
floatingLabelBehavior: FloatingLabelBehavior.auto,
prefix: Text(
'Yyyyyyyyyyyy',
style: TextStyle(
fontSize: 16,
),
),
),
initialValue: 0,
filledColor:
Color(0xffFFB900), // later: use starIconColor
emptyIcon: Icons.star_border_outlined,
emptyColor:
Color(0xffFFB900), // later: use starIconColor
isHalfAllowed: true,
halfFilledIcon: Icons.star_half,
halfFilledColor:
Color(0xffFFB900), // later: use starIconColor
iconSize: 32.0,
),
),
Padding(
padding: const EdgeInsets.only(left: 56.0),
child: FormBuilderRate(
attribute: 'zzz',
decoration: const InputDecoration(
//labelText: 'FormBuilderRate - kitchen:',
floatingLabelBehavior: FloatingLabelBehavior.auto,
prefix: Text(
'Zzzzzzzz',
style: TextStyle(
fontSize: 16,
),
),
),
initialValue: 0,
filledColor:
Color(0xffFFB900), // later: use starIconColor
emptyIcon: Icons.star_border_outlined,
emptyColor:
Color(0xffFFB900), // later: use starIconColor
isHalfAllowed: true,
halfFilledIcon: Icons.star_half,
halfFilledColor:
Color(0xffFFB900), // later: use starIconColor
iconSize: 32.0,
),
),
UPDATE #1 with partial answer:
@Miller's answer below using InputDecoration(border: InputBorder.none), removes the lines, but does not fix the problem of aligning prefix Text and stars.
Even so, here's the partial solution code:
Row(
mainAxisAlignment: MainAxisAlignment.end,
children: [
Flexible(
flex: 1,
child: FormBuilderRate(
attribute: 'www',
decoration: const InputDecoration(
border: InputBorder.none,
prefix: Text(
'Row+Flexible Wwww',
style: TextStyle(
fontSize: 16,
),
textAlign: TextAlign.end,
),
),
initialValue: 0,
filledColor:
Color(0xffFFB900), // later: use starIconColor
emptyIcon: Icons.star_border_outlined,
emptyColor:
Color(0xffFFB900), // later: use starIconColor
isHalfAllowed: true,
halfFilledIcon: Icons.star_half,
halfFilledColor:
Color(0xffFFB900), // later: use starIconColor
iconSize: 32.0,
),
),
],
),
Row(
mainAxisAlignment: MainAxisAlignment.end,
children: [
Flexible(
flex: 1,
child: FormBuilderRate(
attribute: 'Xxxx',
decoration: const InputDecoration(
border: InputBorder.none,
prefix: Text(
'Row+Flexible',
style: TextStyle(
fontSize: 16,
),
textAlign: TextAlign.end,
),
),
initialValue: 0,
filledColor:
Color(0xffFFB900), // later: use starIconColor
emptyIcon: Icons.star_border_outlined,
emptyColor:
Color(0xffFFB900), // later: use starIconColor
isHalfAllowed: true,
halfFilledIcon: Icons.star_half,
halfFilledColor:
Color(0xffFFB900), // later: use starIconColor
iconSize: 32.0,
),
),
],
),
Padding(
padding: const EdgeInsets.only(left: 30.0),
child: FormBuilderRate(
attribute: 'yyy',
decoration: const InputDecoration(
border: InputBorder.none,
prefix: Text(
'Yyyyyyyyyyyy',
style: TextStyle(
fontSize: 16,
),
),
),
initialValue: 0,
filledColor:
Color(0xffFFB900), // later: use starIconColor
emptyIcon: Icons.star_border_outlined,
emptyColor:
Color(0xffFFB900), // later: use starIconColor
isHalfAllowed: true,
halfFilledIcon: Icons.star_half,
halfFilledColor:
Color(0xffFFB900), // later: use starIconColor
iconSize: 32.0,
),
),
Padding(
padding: const EdgeInsets.only(left: 56.0),
child: FormBuilderRate(
attribute: 'zzz',
decoration: const InputDecoration(
border: InputBorder.none,
prefix: Text(
'ZzzzzzzZ',
style: TextStyle(
fontSize: 16,
),
),
),
initialValue: 0,
filledColor:
Color(0xffFFB900), // later: use starIconColor
emptyIcon: Icons.star_border_outlined,
emptyColor:
Color(0xffFFB900), // later: use starIconColor
isHalfAllowed: true,
halfFilledIcon: Icons.star_half,
halfFilledColor:
Color(0xffFFB900), // later: use starIconColor
iconSize: 32.0,
),
),
And here's what this looks like in the Android emulator (first two rating rows use @Miller's approach, which does not fix the #2 prefix vertical text alignment problem):
UPDATE #2: solved issue of vertically aligning prefix Text with rating stars:
Based on part of @Joe Muller's answer here, I made the actual text transparent, added a shadow, then positioned the shadow higher than the original text.
Here's that part of the code:
style: TextStyle(
fontSize: 16,
**color: Colors.transparent,
shadows: [
Shadow(
color: Colors.black54,
offset: Offset(0, -7))
],**
),
And here's a screenshot with the changes:
What's left is #3 from my original question: How to align right side of all four instances of prefix Text AND the left side of the rating stars, with a tighter gap between the prefix Text and left-most star (right now I'm using a hackey padding: const EdgeInsets.only approach)
解决方案
To make changes to a field's underline, you could make use of the
borderattribute ofInputDecoration. For example, to remove the whole underline:border: InputBorder.none,& 3. Kindly note that FormFields, like many other widgets, tend to take all the available width of their parent widget. I would therefore advise using a row between the Text and FormBuilderRate so as to have better control of the positioning of your widgets; like so:
Row(
mainAxisAlignment: MainAxisAlignment.end,
children: [
Flexible(
flex: 1,
child: Text(
'Wwwwwwwwww',
style: TextStyle(fontSize: 16),
textAlign: TextAlign.end,
),
),
Flexible(
flex: 1,
child: FormBuilderRate(
attribute: 'zzz',
decoration: const InputDecoration(
border: InputBorder.none
),
initialValue: 0,
filledColor: Color(0xffFFB900),
emptyIcon: Icons.star_border_outlined,
emptyColor: Color(0xffFFB900),
isHalfAllowed: true,
halfFilledIcon: Icons.star_half,
halfFilledColor: Color(0xffFFB900),
iconSize: 32.0,
),
),
],
),
这篇关于如何格式化FormBuilderRate(Flutter Form Builder包)?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
