要更改OutlinedTextField
的边框宽度,您需要自定义边框和背景绘制
方法一:使用ShapeBorder
自定义边框
ShapeBorder
类,重写paint
方法,以自定义边框宽度和颜色。import 'package:flutter/material.dart';
class CustomBorder extends ShapeBorder {
final double borderWidth;
final Color borderColor;
CustomBorder({required this.borderWidth, required this.borderColor});
@override
EdgeInsetsGeometry get dimensions => EdgeInsets.zero;
@override
Path getInnerPath(Rect rect, {TextDirection? textDirection}) => Path();
@override
Path getOuterPath(Rect rect, {TextDirection? textDirection}) => Path();
@override
void paint(Canvas canvas, Rect rect, {TextDirection? textDirection}) {
final Paint paint = Paint()
..color = borderColor
..style = PaintingStyle.stroke
..strokeWidth = borderWidth;
final BorderRadius borderRadius = BorderRadius.circular(4.0);
final Rect borderRect = borderRadius.resolve(rect);
canvas.drawRRect(borderRect, paint);
}
}
OutlinedTextField
中,设置decoration
属性为InputDecoration
,并自定义border
属性。OutlinedTextField(
decoration: InputDecoration(
border: CustomBorder(borderWidth: 2.0, borderColor: Colors.blue),
),
);
方法二:使用BoxDecoration
自定义背景和边框
OutlinedTextField(
decoration: InputDecoration(
border: OutlineInputBorder(
borderRadius: BorderRadius.circular(4.0),
borderSide: BorderSide(width: 2.0, color: Colors.blue), // 设置边框宽度和颜色
),
),
);
这两种方法都可以更改OutlinedTextField
的边框宽度。第一种方法允许您完全自定义边框,包括使用不规则形状。第二种方法则更简单,适用于更常见的矩形边框。选择哪种方法取决于您的需求。
领取专属 10元无门槛券
手把手带您无忧上云