颤振 - 在底部绘制一个矩形



我试图在底部画一个矩形,只有Rect.fromLTRB没有画Rect对象。

我不知道我是否以错误的方式解释Rect对象,或者我错误地编写了drawRect对象。

你能帮我在底部画一个矩形吗?

import 'package:flutter/material.dart';
void main() {
runApp(new MaterialApp(home: new HomePage()));
}
class HomePage extends StatefulWidget {
@override
HomePageState createState() => new HomePageState();
}
class HomePageState extends State<HomePage> {
@override
Widget build(BuildContext context) {
return new Scaffold(
body: new Stack(
children: <Widget>[
new Positioned(
bottom: 0.0,
left: 0.0,
right: 0.0,
top: 0.0,
child: new CustomPaint(
painter: new Sky(),
)
),
]
)
);
}
}
class Sky extends CustomPainter {
@override
void paint(Canvas canvas, Size size) {
canvas.drawRect(
new Rect.fromLTRB(
0.0, 100.0, 0.0, 0.0
),
new Paint()..color = new Color(0xFF0099FF),
);
}
@override
bool shouldRepaint(Sky oldDelegate) {
return false;
}
}

你的左边和右边是相同的(0.0(,所以它画了一个空的矩形。此外,坐标从顶部开始,因此底部应>顶部;试试这个

new Rect.fromLTRB( 0.0, 0.0, 20.0, 100.0 )

遵循矩形位于屏幕底部的代码:

import 'package:flutter/material.dart';
import 'dart:ui' as ui;
void main() {
runApp(new MaterialApp(home: new HomePage()));
}
class HomePage extends StatefulWidget {
@override
HomePageState createState() => new HomePageState();
}
class HomePageState extends State<HomePage> {
@override
Widget build(BuildContext context) {
final ui.Size logicalSize = MediaQuery.of(context).size;
final double _width = logicalSize.width;
final double _height = logicalSize.height;
double _rectHeight = 50.0;
return new Scaffold(
body: new Stack(
children: <Widget>[
new Positioned(
bottom: 0.0,
left: 0.0,
top: _height - _rectHeight,
right: 0.0,
child: new CustomPaint(
painter: new Sky(_width, _rectHeight),
child: new Text('$_width'),
)
),
]
)
);
}
}
class Sky extends CustomPainter {
final double _width;
final double _rectHeight;
Sky(this._width, this._rectHeight);
@override
void paint(Canvas canvas, Size size) {
canvas.drawRect(
new Rect.fromLTRB(
0.0, 0.0, this._width, _rectHeight
),
new Paint()..color = new Color(0xFF0099FF),
);
}
@override
bool shouldRepaint(Sky oldDelegate) {
return false;
}
}

相关内容

最新更新