1

我正在尝试在 flutter_form_builder 包中格式化 FormBuilderRate 的外观（链接到 pub.dev 上的包）。

具体来说，

  1. 如何消除或更改项目之间的水平线格式
  2. 如何垂直对齐前缀文本（例如，下面屏幕截图中的“Wwww...”）与评分星的底部或中心
  3. 如何对齐前缀文本的所有四个实例的右侧和评级星的左侧，前缀文本和最左边的星之间的差距更小（现在我正在使用 hackeypadding: const EdgeInsets.only方法）

FormBuilderRate 的屏幕截图

这是代码：

                    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 usingInputDecoration(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在此处的部分回答，我将实际文本设为透明，添加了阴影，然后将阴影定位在高于原始文本的位置。

这是代码的那一部分：

style: TextStyle(
                          fontSize: 16,
                          **color: Colors.transparent,
                          shadows: [
                            Shadow(
                                color: Colors.black54,
                                offset: Offset(0, -7))
                          ],**
                        ),

这是更改的屏幕截图：

显示更新 #2 的屏幕截图有效

剩下的是我原来的问题中的#3：如何将前缀文本的所有四个实例的右侧和评级星的左侧对齐，前缀文本和最左边的星之间的差距更小（现在我是使用 hackey 填充： const EdgeInsets.only 方法）

4

1 回答 1

2

  1. 要更改字段的下划线，您可以使用 的border属性InputDecoration。例如，要删除整个下划线：border: InputBorder.none,

  2. & 3. 请注意，与许多其他小部件一样，FormFields 倾向于占用其父小部件的所有可用宽度。因此，我建议在 Text 和 FormBuilderRate 之间使用一行，以便更好地控制小部件的定位；像这样：

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,
      ),
    ),
  ],
),
于 2020-12-17T17:34:52.980 回答