【发布时间】：2021-03-25 09:16:07
【问题描述】：
我正在尝试在 flutter_form_builder 包 (link to package on pub.dev) 中格式化 FormBuilderRate 的外观。
具体来说，
- 如何消除或更改项目之间的水平线格式
- 如何将前缀文本（例如，下面屏幕截图中的“Wwww...”）与评分星的底部或中心垂直对齐
- 如何将所有四个前缀 Text 实例的 right 侧和评级星的左侧对齐，前缀 Text 和最左边的星之间的间隙更小（现在我使用 hackey
padding: const EdgeInsets.only方法）
代码如下：
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,
),
),
更新 #1 部分答案：
@Miller's answer below using InputDecoration(border: InputBorder.none), 删除了这些行，但不解决了对齐前缀文本和星号的问题。
即便如此，下面是部分解决方案代码：
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,
),
),
这是在 Android 模拟器中的样子（前两个评分行使用 @Miller 的方法，它不能解决 #2 前缀垂直文本对齐问题）：
更新 #2：解决了垂直对齐前缀文本与评级星的问题：
基于@Joe Muller 的answer here 的一部分，我将实际文本设置为透明，添加了阴影，然后将阴影定位在高于原始文本的位置。
这是那部分代码：
style: TextStyle(
fontSize: 16,
**color: Colors.transparent,
shadows: [
Shadow(
color: Colors.black54,
offset: Offset(0, -7))
],**
),
以下是更改的屏幕截图：
剩下的是我最初的问题中的#3：如何对齐前缀文本的所有四个实例的右侧和评级星的左侧，前缀文本和最左边的星之间的差距更小（现在我正在使用 hackey 填充：const EdgeInsets.only 方法）
【问题讨论】：
-
截至目前，上述问题的两次更新包含部分答案（最新更新在底部）
-
我实际上可以使用上面“更新#2”中阴影文本的定位来使文本更靠近星星，从而缩小差距！
标签： flutter-layout flutter-form-builder