В своем флаттер-приложении я попытался использовать CustomPainter
для рисования пользовательских фигур.
Здесь я хочу нарисовать 4 маленьких квадрата разных цветов в большом квадрате (здесь желтом).
Я ожидал увидеть 4 квадрата, но по какой-то причине 4 квадрата находятся в левом верхнем углу CustomPainter
.
Вот мой пример приложения:
import 'package:flutter/material.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Demo',
home: MyHomePage(),
);
}
}
class MyHomePage extends StatefulWidget {
@override
_MyHomePageState createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
@override
Widget build(BuildContext context) {
return Scaffold(
backgroundColor: Colors.black,
body: Center(
child: Container(
color: Colors.amber,
width: 180,
height: 180,
child: CustomPaint(
painter: TestCustomPainter(),
),
),
),
);
}
}
class TestCustomPainter extends CustomPainter {
Paint _paintWhite = Paint()
..color = Colors.white
..isAntiAlias = true;
Paint _paintBlue = Paint()
..color = Colors.blue
..isAntiAlias = true;
Paint _paintRed = Paint()
..color = Colors.red
..isAntiAlias = true;
Paint _paintGreen = Paint()
..color = Colors.green
..isAntiAlias = true;
@override
void paint(Canvas canvas, Size size) {
canvas.drawRect(Rect.fromLTRB(0, 0, 90, 90), _paintWhite);
canvas.drawRect(Rect.fromLTRB(90, 0, 0, 90), _paintBlue);
canvas.drawRect(Rect.fromLTRB(0, 90, 90, 0), _paintRed);
canvas.drawRect(Rect.fromLTRB(90, 90, 0, 0), _paintGreen);
}
@override
bool shouldRepaint(covariant CustomPainter oldDelegate) => true;
}
И вот что я получаю:
Что я сделал не так?
Спасибо.
слева должно быть 90
, а справа 180
, тебе не кажется?
@pskink Почему у них неправильные параметры, ведь я хочу, чтобы они были в правом верхнем углу большого желтого квадрата? Какие параметры я должен использовать тогда?
Rect.fromLTRB(90, 0, 180, 90)
но им проще пользоваться Rect.fromLTWH
- так что всегда пользуйтесь Rect.fromLTWH(x, y, 90, 90)
@pskink хорошо, так что это работает с левой 90
и правой 180
, но я не понимаю, почему: разве право не должно быть расстоянием между правой стороной моего маленького квадрата и правой стороной большего квадрата?
какая большая площадь? Canvas.drawRect
ничего не знает о "большом квадрате" - только рисует Rect
Ну, я думал, что CustomPainter
знает о краях, так как size
правильно (180 x 180), но ладно, спасибо за помощь!
@pskink Вы можете опубликовать ответ, чтобы я проголосовал и принял его, если хотите.
опубликуйте ответ тогда ;-)
Я думаю, это то, что вы ищете
import 'package:flutter/material.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Demo',
home: MyHomePage(),
);
}
}
class MyHomePage extends StatefulWidget {
@override
_MyHomePageState createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
@override
Widget build(BuildContext context) {
return Scaffold(
backgroundColor: Colors.black,
body: Center(
child: Container(
color: Colors.amber,
width: 180,
height: 180,
child: CustomPaint(
painter: TestCustomPainter(),
),
),
),
);
}
}
class TestCustomPainter extends CustomPainter {
Paint _paintWhite = Paint()
..color = Colors.white
..isAntiAlias = true;
Paint _paintBlue = Paint()
..color = Colors.blue
..isAntiAlias = true;
Paint _paintRed = Paint()
..color = Colors.red
..isAntiAlias = true;
Paint _paintGreen = Paint()
..color = Colors.green
..isAntiAlias = true;
@override
void paint(Canvas canvas, Size size) {
canvas.drawRect(Rect.fromLTRB(90, 0, 180, 90), _paintWhite);
canvas.drawRect(Rect.fromLTRB(90, 0, 0, 90), _paintBlue);
canvas.drawRect(Rect.fromLTRB(0, 90, 90, 180), _paintRed);
canvas.drawRect(Rect.fromLTRB(180, 180, 90,90), _paintGreen);
}
@override
bool shouldRepaint(covariant CustomPainter oldDelegate) => true;
}
с
Rect.fromLTRB(двойной левый, двойной верхний, двойной правый, двойной нижний) Постройте прямоугольник из его левого, верхнего, правого и нижнего краев.
больше информации об этом здесь, в документах https://api.flutter.dev/flutter/dart-ui/Rect-class.html
вы передаете неправильные параметры в
Rect.fromLTRB
- например:Rect.fromLTRB(90, 0, 0, 90)
- слева90
и справа0