设置组件的最大宽度

Question

我是一个颤振新手，有一个简单的聊天应用程序案例，我希望消息的最大宽度为屏幕尺寸的 50%，但我不确定如何让它工作...

return Padding(
      padding: const EdgeInsets.all(9.0),
      child: Material(
        elevation: 5.0,
        borderRadius: chatBorder,
        color: chatColor,
        child: Padding(
          padding: const EdgeInsets.all(13.0),
          child: Column(
            children: [
              Row(
                mainAxisAlignment: MainAxisAlignment.spaceBetween,
                children: [
                  Align(
                    alignment: Alignment.topLeft,
                    child: Text(
                      messageSender,
                      style: const TextStyle(
                        color: Colors.white70,
                        fontSize: 10.0,
                        fontWeight: FontWeight.w200,
                      ),
                    ),
                  ),
                  Align(
                    alignment: Alignment.topRight,
                    child: Text(
                      timeNow,
                      style: const TextStyle(
                        color: Colors.white70,
                        fontSize: 10.0,
                        fontWeight: FontWeight.w200,
                      ),
                    ),
                  ),
                ],
              ),
              Align(
                alignment: Alignment.centerLeft,
                child: Text(
                  messageText,
                  style: const TextStyle(
                    color: Colors.white,
                    fontSize: 15.0,
                    fontWeight: FontWeight.w500,
                  ),
                ),
              ),
            ],
          ),
        ),
      ),
    );

以下是我的应用程序现在的样子，但我希望它只占用屏幕宽度/消息的 50%，并减少不必要的空白空间。

Answer 1

您可以使用

ConstrainedBox

来包裹小部件以设置 maxWidth

Padding(
  padding: const EdgeInsets.all(9.0),
  child: Material(
    elevation: 5.0,
    borderRadius: BorderRadius.circular(12),
    color: Colors.blue,
    child: Padding(
      padding: const EdgeInsets.all(13.0),
      child: ConstrainedBox(
        constraints: BoxConstraints(maxWidth: MediaQuery.of(context).size.width
        child: const Column(
          children: [
            Row(
              mainAxisAlignment: MainAxisAlignment.spaceBetween,
              children: [
                Align(
                  alignment: Alignment.topLeft,
                  child: Text(
                    'messageSender',
                    style: TextStyle(
                      color: Colors.white70,
                      fontSize: 10.0,
                      fontWeight: FontWeight.w200,
                    ),
                  ),
                ),
                Align(
                  alignment: Alignment.topRight,
                  child: Text(
                    'timeNow',
                    style: TextStyle(
                      color: Colors.white70,
                      fontSize: 10.0,
                      fontWeight: FontWeight.w200,
                    ),
                  ),
                ),
              ],
            ),
            Align(
              alignment: Alignment.centerLeft,
              child: Text(
                'messageText',
                style: TextStyle(
                  color: Colors.white,
                  fontSize: 15.0,
                  fontWeight: FontWeight.w500,
                ),
              ),
            ),
          ],
        ),
      ),
    ),
  ),
),