如何格式化FormBuilderRate(Flutter Form Builder包)?

即使如此，这是 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 itemsHow to vertically align prefix Text (e.g., "Wwww..." in the screenshot below) with bottom or center of rating starsHow 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)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 border attribute of InputDecoration. 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包)?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！