有没有办法在顶部和底部显示倾斜边框?我通过使用两个图像(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,
),
),
],
),
),
),
);
}
在这种情况下,您希望使用Custom Painter小部件。您可以根据坐标绘制形状。
有关详细信息,请参阅本教程。 Drawing Custom Shapes in Flutter using CustomPainter
要在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
方法绘制一条连接您给出的两个点的线。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;
}
}
请参阅this article以获得更全面的答案。