gpt4 book ai didi

dart - 用 flutter 画线

转载 作者:IT王子 更新时间:2023-10-29 06:38:09 25 4
gpt4 key购买 nike

有没有办法在顶部和底部显示倾斜边框?我通过使用两个图像(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,
),
),
],
),
),
),
);
}

最佳答案

Flutter 中如何使用 CustomPaint widget 画线

enter image description here

要在 Flutter 中绘画,您可以使用 CustomPaint 小部件。 CustomPaint小部件需要 CustomPainter 对象作为参数。在该类中,您必须覆盖 paint方法,它为您提供可以在其上绘画的 Canvas 。这是在上图中绘制线条的代码。

@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) double ,从 CustomPaint 的左上角偏移小部件。

另一种选择

您可以对 drawPoints 做类似的事情使用 PointMode.polygon 的方法选项。

enter image description here

@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以获得更完整的答案。

关于dart - 用 flutter 画线,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/54661354/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com