如何在 Flutter 中为“TextFormField”制作自定义基线答案

【问题标题】：How to make custom baseline for `TextFormField` in Flutter如何在 Flutter 中为“TextFormField”制作自定义基线
【发布时间】：2021-09-12 14:08:56
【问题描述】：

我想在 Flutter 中为 TextFormField 创建一个自定义基线。下面给出了我想做的例子。

【问题讨论】：

您需要覆盖UnderlineInputBorder 的paint 或getOuterPath 方法，我会尝试为您编写一个示例。

标签： flutter flutter-layout baseline textformfield

【解决方案1】：

您可以创建自定义输入边框，该边框将扩展UnderlineInputBorder。您需要覆盖的是paint 方法。我在这里以这种方式实现，以便您可以轻松添加颜色，然后它会为您绘制线条，为每种颜色提供相同的宽度，但可以根据您的需要随时更新它。应该是这样的：

class CustomInputBorder extends UnderlineInputBorder {
  @override
  void paint(Canvas canvas, Rect rect,
      {double gapStart,
      double gapExtent = 0.0,
      double gapPercentage = 0.0,
      TextDirection textDirection}) {
    drawLines(
        canvas, rect, [Colors.red, Colors.green, Colors.blue, Colors.orange]);
  }

  void drawLines(Canvas canvas, Rect rect, List<Color> colors) {
    var borderWidth = rect.bottomRight.dx - rect.bottomLeft.dx;
    var sectionWidth = borderWidth / colors.length;
    var startingPoint = rect.bottomLeft;
    var endPoint = getEndPoint(startingPoint, sectionWidth);

    colors.forEach((color) {
      var paint = Paint();
      paint.color = color;
      paint.strokeWidth = 1.0;

      canvas.drawLine(startingPoint, endPoint, paint);

      startingPoint = getNewStartingPoint(startingPoint, sectionWidth);
      endPoint = getEndPoint(startingPoint, sectionWidth);
    });
  }

  Offset getNewStartingPoint(Offset oldStartingPoint, double width) {
    return Offset(oldStartingPoint.dx + width, oldStartingPoint.dy);
  }

  Offset getEndPoint(Offset startingPoint, double width) {
    return Offset(startingPoint.dx + width, startingPoint.dy);
  }
}

然后你就可以使用它了：

TextField(
  decoration: InputDecoration(
    labelText: 'Username',
    border: CustomInputBorder(),
    enabledBorder: CustomInputBorder(),
    focusedBorder: CustomInputBorder(),
  ),
),

这就是现在的样子：

https://i.stack.imgur.com/fDTBu.png

https://i.stack.imgur.com/z4SjM.png

https://i.stack.imgur.com/l5aW8.png

【讨论】：

除了上面的答案之外，您应该必须在 CustomInputBorder 上方添加 import 'package:flutter/material.dart'; 才能使事情正常进行。而且您还必须修改绘制方法，将double gapStart 替换为double? gapStart，将TextDirection textDirection 替换为TextDirection? textDirection
没错，如果你使用空安全，你必须改变这两个。导入有点不言自明，但感谢您指出。

【解决方案2】：

第一个值得关注的是UnderlineInputBorder 类。您应该能够将TextFormField 的decoration: 设置为InputDecoration，它可以将UnderlineInputBorder 作为其border:。然后，您应该能够适当地设置边框的 `BorderSide' 属性以匹配您的设计。

【讨论】：