flutter - 如何在文本字段上制作干净的非均匀侧边框

Question

我想重现这种效果

我尝试了多种解决方案:

• A borderRadius can only be given for uniform borders -> 这个不适合我，因为每当你调整小部件的大小时，该区域就会变大

• https://stackoverflow.com/a/72155716/21357698 -> 如果没有其他解决方案，这是我的最后一个解决方案，因为我想使用原生 flutter，而不需要任何包来做到这一点。

• 我看到 flutter 最近添加了这个，但根据我的理解，它只有在每一侧之间的颜色均匀时才有效，这不是我的情况:https://github.com/flutter/flutter/pull/121921

• 我尝试添加一个仅在左侧带有边框的 BoxDecoration，我想将其圆角化，但出现以下错误:

borderRadius只能在具有统一颜色和样式的边框上给出。

链接代码:

decoration: const BoxDecoration(
              border: Border(
                left: BorderSide(width: 6, color: Colors.red),
              ),
              // borderRadius: BorderRadius.all(Radius.circular(4)),
            ),
            child: pfTextField,

• 我尝试创建自定义 OutlineInputBorder，以便绘制我想要的内容，但每次重建 View 时它都会闪烁(如果您有解决方案，它会适合我)

这是我为此自定义 OutlineInputBorder 所做的代码:

import 'package:flutter/material.dart';


class CustomInputBorder extends OutlineInputBorder {

  final Color? leftBorderSideColor;

  /// Constructeur
  const CustomInputBorder ({
    this.leftBorderSideColor,
    super.borderRadius,
    super.borderSide,
    super.gapPadding,
  });

  @override
  void paint(
    Canvas canvas,
    Rect rect, {
    double? gapStart,
    double gapExtent = 0.0,
    double gapPercentage = 0.0,
    TextDirection? textDirection,
  }) {
   
    RRect newRect = RRect.fromLTRBAndCorners(
      rect.left,
      rect.top,
      
      
      rect.left + 4,
      rect.bottom,
     
      topLeft: const Radius.circular(4),
      bottomLeft: const Radius.circular(4),
    );
    canvas.drawRRect(
      newRect,
      borderSide.toPaint()
        ..color = leftBorderSideColor ?? Colors.transparent
        ..style = PaintingStyle.fill,
    );
    super.paint(
      canvas,
      rect,
      gapStart: gapStart,
      gapExtent: gapExtent,
      gapPercentage: gapPercentage,
      textDirection: textDirection,
    );
  }
}

我觉得我错过了一些东西，这一定是一种简单的方法。您知道我如何实现这一目标，或者我对最后一个解决方案的错误是什么？

Answer 1

我为这个自定义文本字段编写了一段工艺代码片段。希望它适合您。您可以通过 DartPad 进行测试

class CustomTextFieldWidget extends StatelessWidget {
  const CustomTextFieldWidget({super.key});

  @override
  Widget build(BuildContext context) {
    return TextField(
      decoration: InputDecoration(
        fillColor: Colors.white,
        filled: true,
        prefixIcon: Container(
          margin: const EdgeInsets.symmetric(horizontal: 1),
          color: Colors.transparent,
          child: Align(
            alignment: Alignment.centerLeft,
            child: Container(
              margin: const EdgeInsets.symmetric(vertical: 0.5),
              width: 4,
              decoration: const BoxDecoration(
                borderRadius: BorderRadius.only(
                  topLeft: Radius.circular(6),
                  bottomLeft: Radius.circular(6),
                ),
                color: Colors.red,
              ),
            ),
          ),
        ),
        prefixIconConstraints: const BoxConstraints(
          maxWidth: 24,
          maxHeight: 58,
        ),
        hintText: "This is hint",
        hintStyle: const TextStyle(
            fontSize: 12,
            fontWeight: FontWeight.w400,
            color: Colors.grey
        ),
        enabledBorder: getInputBorder(),
        focusedBorder: getInputBorder(),
        disabledBorder: getInputBorder(),
        errorBorder: getInputBorder(),
      ),
    );
  }
}
InputBorder getInputBorder() {
  return OutlineInputBorder(
      borderSide: const BorderSide(color: Colors.black, width: 1,),
      borderRadius: BorderRadius.circular(4)
  );
}