[英]Flutter - How to get dashed InputDecoration border in TextFormField?
[英]How to give a "Dashed Border" in flutter?
我嘗試在 flutter 中提供虛線邊框,但在 flutter 中沒有虛線邊框的選項。所以還有其他方法可以在 futter 中創建虛線邊框。
new Container(
decoration: new BoxDecoration(
border: Border(
left: BorderSide(color: Color(0XFFFF6D64), width: 2.0))),
height: 20.0,
margin: const EdgeInsets.only(left: 35.0),
child: new Row(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
new DecoratedBox(
decoration: new BoxDecoration(
border: Border(
left:
BorderSide(color: Color(0XFFFF6D64), width: 2.0,style: BorderStyle.))),
)
],
),
),
只要是你想要的矩形虛線邊框,你現在可以使用我上傳到 Pub 的dotted_border包。
DottedBorder(
color: Colors.black,
gap: 3,
strokeWidth: 1,
child: FlutterLogo(size: 148),
)
使用這個組件:
import 'dart:math';
import 'package:flutter/material.dart';
class CircularBorder extends StatelessWidget {
final Color color;
final double size;
final double width;
final Widget icon;
const CircularBorder({Key key, this.color = Colors.blue, this.size = 70, this.width = 7.0, this.icon}) : super(key: key);
@override
Widget build(BuildContext context) {
return Container(
height: size,
width: size,
alignment: Alignment.center,
child: Stack(
alignment: Alignment.center,
children: <Widget>[
icon == null ? Container() : icon,
CustomPaint(
size: Size(size, size),
foregroundPainter: new MyPainter(
completeColor: color,
width: width),
),
],
),
);
}
}
class MyPainter extends CustomPainter {
Color lineColor = Colors.transparent;
Color completeColor;
double width;
MyPainter(
{ this.completeColor, this.width});
@override
void paint(Canvas canvas, Size size) {
Paint complete = new Paint()
..color = completeColor
..strokeCap = StrokeCap.round
..style = PaintingStyle.stroke
..strokeWidth = width;
Offset center = new Offset(size.width / 2, size.height / 2);
double radius = min(size.width / 2, size.height / 2);
var percent = (size.width *0.001) / 2;
double arcAngle = 2 * pi * percent;
print("$radius - radius");
print("$arcAngle - arcAngle");
print("${radius / arcAngle} - divider");
for (var i = 0; i < 8; i++) {
var init = (-pi / 2)*(i/2);
canvas.drawArc(new Rect.fromCircle(center: center, radius: radius),
init, arcAngle, false, complete);
}
}
@override
bool shouldRepaint(CustomPainter oldDelegate) {
return true;
}
}
使用:
CircularBorder(
width: 6,
size: 55,
color: Colors.grey,
icon: Icon(Icons.access_alarm, color: Colors.grey),
),
對於使用此的圓角,您可以使用
CardRadius = 10.0;
return DottedBorder(
color: Colors.black,
strokeWidth: 3,
radius: Radius.circular(CardRadius),
dashPattern: [10, 5],
customPath: (size) {
return Path()
..moveTo(CardRadius, 0)
..lineTo(size.width - CardRadius, 0)
..arcToPoint(Offset(size.width, CardRadius), radius: Radius.circular(CardRadius))
..lineTo(size.width, size.height - CardRadius)
..arcToPoint(Offset(size.width - CardRadius, size.height), radius: Radius.circular(CardRadius))
..lineTo(CardRadius, size.height)
..arcToPoint(Offset(0, size.height - CardRadius), radius: Radius.circular(CardRadius))
..lineTo(0, CardRadius)
..arcToPoint(Offset(CardRadius, 0), radius: Radius.circular(CardRadius));
},
child: Container(...)
}
這是它的樣子
您可以使用 dashPattern,該屬性允許您通過傳入雙精度數組來指定 Dash 序列。
DottedBorder(
dashPattern: [6, 3, 2, 3],
child: ...
);
這段代碼給出了一個寬度為 6、空格 3、寬度為 2、空格 3 的虛線序列,然后繼續。
要在屏幕上顯示一條虛線,請使用
DottedBorder(
color: Color(0xFFE9EBF5),
strokeWidth: 1,
radius: Radius.circular(10),
dashPattern: [5, 5],
customPath: (size) {
return Path()
..moveTo(0, 10)
..lineTo(size.width, 10);
},
child: Container(),
),
我為此使用了 dotted_border 插件-
import 'package:flutter/material.dart';
import 'package:dotted_border/dotted_border.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
appBar: AppBar(
title: Text('Dotted Border'),
),
body: SafeArea(
child: Center(
child: Padding(
padding: const EdgeInsets.all(8.0),
child: Column(
mainAxisSize: MainAxisSize.min,
crossAxisAlignment: CrossAxisAlignment.center,
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
container1,
Spacer(),
container2,
Spacer(),
container3,
Spacer(),
container4,
],
),
),
),
)),
);
}
Widget get container1 {
return DottedBorder(
padding: EdgeInsets.all(4),
dashPattern: [9, 5],
child: Container(
height: 110,
width: double.maxFinite,
decoration: BoxDecoration(
color: Color(0xff994444),
),
),
);
}
Widget get container2 {
return DottedBorder(
padding: EdgeInsets.all(8),
dashPattern: [6],
borderType: BorderType.Circle,
child: Container(
height: 210,
width: double.maxFinite,
decoration: ShapeDecoration(
shape: CircleBorder(),
color: Color(0xff444499),
),
),
);
}
Widget get container3 {
return DottedBorder(
padding: EdgeInsets.all(4),
borderType: BorderType.RRect,
radius: Radius.circular(20),
child: Container(
height: 120,
width: double.maxFinite,
decoration: ShapeDecoration(
shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(16)),
color: Color(0xff994444),
),
),
);
}
Widget get container4 {
return DottedBorder(
borderType: BorderType.Oval,
dashPattern: [8,4,2,4],
child: Container(
height: 180,
width: double.maxFinite,
decoration: ShapeDecoration(
shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(8)),
color: Color(0x22888888),
),
),
);
}
}
https://pub.dev/packages/mobkit_dashed_border你可以使用這個 package。這個 package 不使用小部件。 它創建了一個新的邊框類型。 您可以在任何使用邊框的地方使用它。
Container(
margin: EdgeInsets.symmetric(horizontal: 10, vertical: 20),
height: 16,
width: MediaQuery.of(context).size.width,
decoration: BoxDecoration(
color: ThemeConstants.blueGreyDivider,
borderRadius: BorderRadius.circular(100),
),
child: SingleChildScrollView(
physics: NeverScrollableScrollPhysics(),
scrollDirection: Axis.horizontal,
child: Row(
children: List.generate(
MediaQuery.of(context).size.width ~/ (10 + 5),
(_) => Container(
width: 10,
height: 2,
color: Colors.white,
margin: EdgeInsets.only(left: 10 / 2, right: 5 / 2),
),
),
),
),
)
Blockquote
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.