dart - 用颤振画线
问题描述
有没有办法在顶部和底部显示倾斜边框?我通过使用两个图像(top_layout 和 bottom_layout.png)提出了以下解决方案。有没有其他方法可以在不使用静态图像的情况下制作带有阴影的彩条?
return Container(
color: const Color.fromARGB(255, 236, 0, 140),
child: Container(
padding: const EdgeInsets.all(8.0),
child: Container(
color: Colors.white,
margin:
EdgeInsets.only(top: 60.0, bottom: 20.0, left: 15.0, right: 15.0),
child: Stack(
children: <Widget>[
Positioned.fill(
child: Image.asset(
"assets/imgs/top_layout.png",
fit: BoxFit.fitWidth,
alignment: Alignment.topCenter,
),
),
Positioned.fill(
child: Image.asset(
"assets/imgs/xbottom_layout.png",
fit: BoxFit.fitWidth,
alignment: Alignment.bottomLeft,
),
),
],
),
),
),
);
}
解决方案
如何使用 CustomPaint 小部件在 Flutter 中绘制线条
要在 Flutter 中绘画,请使用CustomPaint
小部件。小CustomPaint
部件将CustomPainter
对象作为参数。在该类中,您必须重写该paint
方法,该方法为您提供了一个可以在其上绘画的画布。这是在上图中绘制线条的代码。
@override
void paint(Canvas canvas, Size size) {
final p1 = Offset(50, 50);
final p2 = Offset(250, 150);
final paint = Paint()
..color = Colors.black
..strokeWidth = 4;
canvas.drawLine(p1, p2, paint);
}
笔记:
- 该
drawLine
方法绘制一条连接您给它的两个点的线。 - An
Offset
是一对双精度数(dx, dy)
,从小部件的左上角偏移CustomPaint
。
另外的选择
您可以使用该选项对drawPoints
方法执行类似操作。PointMode.polygon
@override
void paint(Canvas canvas, Size size) {
final pointMode = ui.PointMode.polygon;
final points = [
Offset(50, 100),
Offset(150, 75),
Offset(250, 250),
Offset(130, 200),
Offset(270, 100),
];
final paint = Paint()
..color = Colors.black
..strokeWidth = 4
..strokeCap = StrokeCap.round;
canvas.drawPoints(pointMode, points, paint);
}
语境
这是main.dart代码,以便您可以在上下文中查看它。
import 'dart:ui' as ui;
import 'package:flutter/material.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
body: HomeWidget(),
),
);
}
}
class HomeWidget extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Center(
child: CustomPaint( // <-- CustomPaint widget
size: Size(300, 300),
painter: MyPainter(),
),
);
}
}
class MyPainter extends CustomPainter { // <-- CustomPainter class
@override
void paint(Canvas canvas, Size size) {
// <-- Insert your painting code here.
}
@override
bool shouldRepaint(CustomPainter old) {
return false;
}
}
也可以看看
有关我更完整的答案,请参阅本文。
推荐阅读
- sql - SQL Server 在单独的列中显示总值,其中分组依据已经分解了总值
- visual-studio-code - 更改 VSCODE 中缩进的背景颜色?
- c# - 如何从未知形式获得布尔值?
- postgresql - 成本降低了,但时间几乎一样,为什么?
- java - 使用 Jsoup 获取完整的 HTML
- spring - EnableWebMvcConfiguration 需要一个名为“entityManagerFactory”的 bean,但无法找到
- python - 从数据框中捕获组织名称
- google-app-engine - GAE 标准迁移到 Go 1.11/1.12 后的缓存
- r - 如何根据包括自引用匹配在内的一组条件删除行对?
- kubernetes - minikube 上的 Istio - Envoy 缺少入站应用程序端口的侦听器:9095