我有TextField,我需要更改边框的Corners Cut,我尝试在Container上包装TextField并应用BeveledRectangleBorder,但这是不合适的。
请建议我该怎么做。
最佳答案
更新
经过一些搜索,我发现了您与我共享的该设计的源代码。他们已经为该特定样式构建了一个自定义输入边框(CutCornersBorder
)。您可以使用该文件并将其添加到主题中,而无需添加任何额外的代码即可获得TextField的外观。
CutCornersBorder
return MaterialApp(
home: HomePage(),
theme: ThemeData(
inputDecorationTheme: InputDecorationTheme(border: CutCornersBorder()),
),
);
Full PreviewOLD
您可以通过创建自己的自定义绘画工具实现来实现。
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(),
),
),
),
);
}
}
关于flutter - 如何在Flutter中为TextField使用BeveledRectangleBorder,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/62768276/