Flutter中TextField的BeveledRectangleBorder如何

Question

我有 TextField 我需要更改边框 Corners Cut，我尝试将 TextField 包装在 Container 上并应用 BeveledRectangleBorder 但不正确。

请建议我如何做到这一点。

Answer 1

更新

经过一番搜索，我找到了您与我分享的那个设计的源代码。他们为该特定样式构建了自定义输入边框 (CutCornersBorder)。您可以使用该文件并将其添加到您的主题中以获得 TextField 的外观，而无需添加任何额外的代码。

CutCornersBorder

return MaterialApp(
      home: HomePage(),
      theme: ThemeData(
        inputDecorationTheme: InputDecorationTheme(border: CutCornersBorder()),
      ),
    );

Full Preview

旧

您可以通过创建自己的自定义画家实现来做到这一点。

FlatCorneredBackgroundPainter

class FlatCorneredBackgroundPainter extends CustomPainter {
  double radius, strokeWidth;
  Color strokeColor;

  FlatCorneredBackgroundPainter(
      {this.radius = 10, this.strokeWidth = 4, this.strokeColor = Colors.blue});

  @override
  void paint(Canvas canvas, Size size) {
    double w = size.width;
    double h = size.height;

    Paint paint = Paint()
      ..style = PaintingStyle.stroke
      ..strokeWidth = strokeWidth
      ..color = strokeColor;

    Path path = Path()
      ..addPolygon([
        Offset(radius, 0),
        Offset(w - radius, 0),
        Offset(w, radius),
        Offset(w, h - radius),
        Offset(w - radius, h),
        Offset(radius, h),
        Offset(0, h - radius),
        Offset(0, radius),
      ], true);

    canvas.drawPath(path, paint);
  }

  @override
  bool shouldRepaint(CustomPainter oldDelegate) {
    return false;
  }
}

用法

class HomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: CustomPaint(
          painter: FlatCorneredBackgroundPainter(radius: 10.0, strokeColor: Colors.red, strokeWidth: 2),
          child: Container(
            width: 300,
            height: 70,
            padding: const EdgeInsets.all(8.0),
            child: TextField(),
          ),
        ),
      ),
    );
  }
}