Flutter:查看 whatsapp 上发送的消息？

Question

我想获得此消息 View ，但我无法在最后添加时钟和蓝色刻度。当消息变长时，它不应看起来失真。

我尝试了这样的代码，但结果不一样。

Row sentMessage(BuildContext context, int index) {
    return Row(
      mainAxisSize: MainAxisSize.min,
      children: [
        Container(
          child: Container(
            constraints: BoxConstraints(
              maxWidth: displayWidth(context) * 0.80,
              minWidth: displayWidth(context) * 0.20,
            ),
            decoration: BoxDecoration(
                color: Color(0xffDCF8C6),
                borderRadius: BorderRadius.all(Radius.circular(9))),
            child: Column(
              crossAxisAlignment: CrossAxisAlignment.end,
              children: [
                Container(
                  child: Text(messages[index]),
                ),
                Container(
                  child: Text('11:11'),
                )
              ],
            ),
            margin: EdgeInsets.symmetric(
              horizontal: displayWidth(context) * 0.02,
              vertical: displayWidth(context) * 0.004,
            ),
            padding: EdgeInsets.all(displayWidth(context) * 0.02),
          ),
          alignment: Alignment.centerRight,
          width: displayWidth(context),
        ),
      ],
    );
  }

这是结果

Answer 1

经过一些时间和思考，我能够自己做到这一点。

Row sentMessage(BuildContext context, int index) {
    return Row(
      mainAxisSize: MainAxisSize.min,
      children: [
        Container(
          child: Container(
            constraints: BoxConstraints(
              maxWidth: displayWidth(context) * 0.80,
              minWidth: displayWidth(context) * 0.20,
            ),
            decoration: BoxDecoration(
                color: Color(0xffDCF8C6),
                borderRadius: BorderRadius.all(Radius.circular(5))),
            child: Wrap(
              verticalDirection: VerticalDirection.down,
              alignment: WrapAlignment.end,
              children: [
                Container(
                  margin: EdgeInsets.zero,
                  padding: EdgeInsets.only(
                      bottom: displayHeightOutAppBar(context) * 0.005),
                  constraints: BoxConstraints(
                    maxWidth: displayWidth(context) * 0.80,
                  ),
                  child: Text(
                    messages[index],
                    style: TextStyle(
                      fontSize: displayWidth(context) * 0.04,
                      color: Colors.black,
                    ),
                  ),
                ),
                Container(
                  padding: EdgeInsets.zero,
                  margin: EdgeInsets.only(
                      top: displayHeightOutAppBar(context) * 0.006,
                      left: displayWidth(context) * 0.015),
                  //alignment: Alignment.bottomRight,
                  constraints: BoxConstraints(
                    maxWidth: displayWidth(context) * 0.20,
                  ),
                  child: Text(
                    '11:11',
                    style: TextStyle(color: Colors.grey),
                  ),
                ),
                Container(
                  margin: EdgeInsets.only(
                      top: displayHeightOutAppBar(context) * 0.006),
                  child: Icon(
                    Icons.done_all,
                    size: displayWidth(context) * 0.04,
                    color: Colors.blue,
                  ),
                ),
              ],
            ),
            margin: EdgeInsets.symmetric(
              horizontal: displayWidth(context) * 0.02,
              vertical: displayWidth(context) * 0.004,
            ),
            padding: EdgeInsets.only(
                left: displayWidth(context) * 0.015,
                right: displayWidth(context) * 0.015,
                top: displayWidth(context) * 0.015),
          ),
          alignment: Alignment.centerRight,
          width: displayWidth(context),
        ),
      ],
    );
  }

我在@gmdev 的推荐下添加了解释
我做的错误是使用“列”将项目一个放在另一个上。相反，我使用“包装”将它们并排放置。
我将“MaxWidth”值赋予了覆盖内部项目而不是主要“Container”的“Containers”。我用“Padding”和“Margin”调整了它们之间的空间。
也许有不同的方法可以做到这一点，但我认为这是最简单的方法。有不同解决方案的人可以写
在这里我再次卡住并添加了第二个编辑
通过Whatsapp发送的第一条消息的边缘有一个小三角形。唯一的方法是“ClipPath”。如果你的数学不好，你将不得不努力做到这一点。找不到类似的互联网上的例子。

Row firstSentMessage(BuildContext context, int index) {
    return Row(
      mainAxisSize: MainAxisSize.min,
      children: [
        Container(
          child: ClipPath(
            clipper: MyCustomClipper1(),
            child: Container(
              constraints: BoxConstraints(
                maxWidth: displayWidth(context) * 0.80,
                minWidth: displayWidth(context) * 0.20,
              ),
              decoration: BoxDecoration(
                color: Color(0xffDCF8C6),
                borderRadius: BorderRadius.only(
                    topLeft: Radius.circular(5),
                    bottomLeft: Radius.circular(5),
                    bottomRight: Radius.circular(5)),
              ),
              child: Wrap(
                verticalDirection: VerticalDirection.down,
                alignment: WrapAlignment.end,
                children: [
                  Container(
                    margin: EdgeInsets.zero,
                    padding: EdgeInsets.only(
                        bottom: displayHeightOutAppBar(context) * 0.005),
                    constraints: BoxConstraints(
                      maxWidth: displayWidth(context) * 0.80,
                    ),
                    child: Text(
                      messages[index],
                      style: TextStyle(
                        fontSize: displayWidth(context) * 0.04,
                        color: Colors.black,
                      ),
                    ),
                  ),
                  Container(
                    padding: EdgeInsets.zero,
                    margin: EdgeInsets.only(
                      top: displayHeightOutAppBar(context) * 0.006,
                      left: displayWidth(context) * 0.015,
                    ),
                    //alignment: Alignment.bottomRight,
                    constraints: BoxConstraints(
                      maxWidth: displayWidth(context) * 0.20,
                    ),
                    child: Text(
                      '11:11',
                      style: TextStyle(color: Colors.grey),
                    ),
                  ),
                  Container(
                    margin: EdgeInsets.only(
                      top: displayHeightOutAppBar(context) * 0.006,
                      right: displayWidth(context) * 0.015,
                    ),
                    child: Icon(
                      Icons.done_all,
                      size: displayWidth(context) * 0.04,
                      color: Colors.blue,
                    ),
                  ),
                ],
              ),
              margin: EdgeInsets.symmetric(
                horizontal: displayWidth(context) * 0.01,
                vertical: displayWidth(context) * 0.004,
              ),
              padding: EdgeInsets.only(
                  left: displayWidth(context) * 0.015,
                  right: displayWidth(context) * 0.015,
                  top: displayWidth(context) * 0.015),
            ),
          ),
          alignment: Alignment.centerRight,
          width: displayWidth(context),
          margin: EdgeInsets.only(top: displayHeightOutAppBar(context) * 0.007),
        ),
      ],
    );
  }

这就是“快船”。

class MyCustomClipper1 extends CustomClipper<Path> {
  @override
  Path getClip(Size size) {
    Path path = Path();

    path.lineTo(0, size.height);
    path.lineTo(20, size.height);
    path.arcToPoint(Offset(size.width - 12, 13),
        radius: Radius.circular(1), clockwise: false);
    path.lineTo(size.width, 0);

    path.close();
    return path;
  }

  @override
  bool shouldReclip(CustomClipper<Path> oldClipper) => true;
}

我在新代码中为它添加了“ClipPath”和“clipper”。我稍微更改了“padding”和“margin”值以使图像正确。