[英]Custom Shape in Flutter
我正在嘗試繪制這樣的形狀,其中包含一些文本和數據。
我為此使用 CustomPaint
CustomPaint(
painter: new RightBox(context),
child: container()
),
Container container() {
return Container(
height: 200,
width: 200,
color: Colors.black,
margin: EdgeInsets.only(left: 20),
child: Center(child: Text("Hi Khushal",
style: TextStyle(
color: Colors.white
),
),)
);
}
class RightBox extends CustomPainter {
RightBox(this.context);
BuildContext context;
@override
void paint(Canvas canvas, Size size) {
size = MediaQuery.of(context).size;
Paint paint = Paint()
..color = Colors.black;
Path path = Path()
..moveTo(size.width * 0.02 + size.width * 0.5, size.height * 0.85)
..lineTo(size.width * 0.05 + size.width * 0.5, size.height * 0.70)
..lineTo(size.width * 0.45 + size.width * 0.5, size.height * 0.67)
..lineTo(size.width * 0.48 + size.width * 0.5, size.height * 0.85);
path.close();
canvas.drawPath(path, paint);
}
@override
bool shouldRepaint(RightBox oldDelegate) {
return true;
}
}
我希望文本顯示在右下角的 CustomPaint 小部件中,我將一個子容器傳遞給 CustomPaint,但相反,我在堆棧中單獨放置了一個小部件。 我知道我做錯了什么,請幫助我實現 UI。
您的painter
正在占用屏幕的全尺寸。 因此,您需要align
container
以將其放入畫家內部。 這是一種方法。 有幾種方法可以做到。
您將container
和painter
放在stack
小部件中。 根據您的需要Align
container
。 確保提供一些padding
和margin
以獲得更准確的結果。
Stack(
children: <Widget>[
Align(
alignment: Alignment.bottomRight,
child: Container(
height: 200,
width: 200,
alignment: Alignment.bottomRight,
child: Center(
child: Text(
"Hi Khushal",
style: TextStyle(color: Colors.black),
),
)),
),
CustomPaint(
painter: RightBox(context),
),
],
),
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.