Flutter 中的自定义形状答案

【问题标题】：Custom Shape in FlutterFlutter 中的自定义形状
【发布时间】：2020-04-12 01:07:18
【问题描述】：

我正在尝试绘制这样的形状，其中包含一些文本和数据。

我正在为此使用 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 Widget 中，我将一个子容器传递给 CustomPaint，但相反，我得到了一个单独放置在堆栈中的小部件。我知道我做错了什么，请帮我实现 UI。

【问题讨论】：

标签： user-interface flutter user-experience

【解决方案1】：

您的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),
      ),
    ],
  ),

【讨论】：