Question

我正在尝试构建类似于聊天气泡的内容，其中每个聊天气泡的文本都将正常对齐，并且时间戳将对齐气泡的右下角。气泡的大小必须随文本扩大，并且不应占用多余的空间。

为此，我使用了带有两个Container子级的Column。第二个孩子有时间戳。

在不向第二个Container子级添加“ alignment”属性的情况下，气泡大小正确地缩小/扩展到文本，就像这样：

但是当我在第二个容器中添加alignment: Alignment.bottomRight时，气泡大小会扩大，以填满整个屏幕宽度。

是否可以在不扩大气泡大小的情况下将“晚上7:30 PM”文本对齐气泡的右下角？

Scaffold(
        body: Container(
          decoration: BoxDecoration(
            color: Colors.blue,
          ),
          child: Column(
            mainAxisSize: MainAxisSize.min,
            children: <Widget>[
              Container(
                child: Text(
                  "Without Alignment",
                  style: TextStyle(fontWeight: FontWeight.bold, fontSize: 30),
                ),
              ),
              Container(
//                alignment: Alignment.bottomRight,
                decoration: BoxDecoration(
                  border: Border.all(),
                ),
                child: Text(
                  "7:30 PM",
                  textDirection: TextDirection.rtl,
                  textAlign: TextAlign.right,
                  style: TextStyle(fontWeight: FontWeight.bold, fontSize: 30),
                ),
              ),
            ],
          ),
        ),
      ),

Answer 1

我编辑了答案，尝试以下方法：

Column(crossAxisAlignment: CrossAxisAlignment.end,  
                mainAxisSize: MainAxisSize.max,
                children: <Widget>[
                  Container(
                    child: Text(
                      "Without Alignment",
                      style: TextStyle(fontWeight: FontWeight.bold, fontSize: 30),
                    ),
                  ),
                   Container( 
                   //alignment: Alignment.bottomRight,
                     //constraints: BoxConstraints.expand(),
                    decoration: BoxDecoration(
                      border: Border.all(),
                    ),
                    child: Text(
                      "7:30 PM",
                      style: TextStyle(fontWeight: FontWeight.bold, fontSize: 30),
                    ),
                  ),
                ],
              );

Answer 2

尝试一下，对我有用。

Padding(
    padding: const EdgeInsets.all(8.0),
    child: Container(
      width: 300,
      padding: EdgeInsets.all(10),
        decoration: BoxDecoration(
          color: Colors.blue,
        ),
        child: Column(
          mainAxisSize: MainAxisSize.min,
          crossAxisAlignment: CrossAxisAlignment.start,
          children: <Widget>[
            Container(
              child: Text(
                "Without Alignment",
                style: TextStyle(fontWeight: FontWeight.bold, fontSize: 30),
              ),
            ),
            Row(
              mainAxisAlignment: MainAxisAlignment.end,
              children: <Widget>[
                Container(
              decoration: BoxDecoration(
                border: Border.all(),
              ),
              child: Text(
                "7:30 PM",
                textDirection: TextDirection.rtl,
                textAlign: TextAlign.right,
                style: TextStyle(fontWeight: FontWeight.bold, fontSize: 30),
              ),
            ),
              ],
            )
          ],
        ),
      ),
  ),

Answer 3

这可能对您有帮助

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: MainWidget(),
    );
  }
}

class MainWidget extends StatefulWidget {
  @override
  _MainWidgetState createState() => _MainWidgetState();
}

class _MainWidgetState extends State<MainWidget> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: ListView(
        shrinkWrap: true,
        children: <Widget>[
          ReceivedMessageBubble(
            message:
                "This is a demo message send by XXXX. So don't reply it. Trying to making it multiple lines. You can increase it",
            time: "12:45 PM",
          ),
          SendMessageBubble(
            message:
                "Oh!!! OK",
            time: "12:45 PM",
          ),
        ],
      ),
    );
  }
}

class SendMessageBubble extends StatelessWidget {
  final String message;
  final String time;

  const SendMessageBubble({
    Key key,
    this.message,
    this.time,
  })  : assert(message != null),
        assert(time != null),
        super(key: key);

  @override
  Widget build(BuildContext context) {
    return LayoutBuilder(
      builder: (context, constraints) {
        double maxBubbleWidth = constraints.maxWidth * 0.7;
        return Align(
          alignment: Alignment.centerRight,
          child: ConstrainedBox(
            constraints: BoxConstraints(maxWidth: maxBubbleWidth),
            child: Container(
              decoration: BoxDecoration(
                color: Colors.blue[300],
                borderRadius: const BorderRadius.only(
                  topLeft: Radius.circular(10.0),
                  topRight: Radius.circular(0.0),
                  bottomLeft: Radius.circular(10.0),
                  bottomRight: Radius.circular(10.0),
                ),
              ),
              margin: const EdgeInsets.all(10.0),
              padding: const EdgeInsets.all(10.0),
              child: IntrinsicWidth(
                child: Column(
                  crossAxisAlignment: CrossAxisAlignment.end,
                  children: <Widget>[
                    Text(message),
                    const SizedBox(height: 5.0),
                    Row(
                      mainAxisAlignment: MainAxisAlignment.start,
                      children: <Widget>[
                        Text(
                          time,
                          style: const TextStyle(
                            color: Colors.black54,
                            fontSize: 10.0,
                          ),
                        ),
                      ],
                    )
                  ],
                ),
              ),
            ),
          ),
        );
      },
    );
  }
}

class ReceivedMessageBubble extends StatelessWidget {
  final String message;
  final String time;

  const ReceivedMessageBubble({
    Key key,
    this.message,
    this.time,
  })  : assert(message != null),
        assert(time != null),
        super(key: key);

  @override
  Widget build(BuildContext context) {
    return LayoutBuilder(
      builder: (context, constraints) {
        double maxBubbleWidth = constraints.maxWidth * 0.7;
        return Align(
          alignment: Alignment.centerLeft,
          child: ConstrainedBox(
            constraints: BoxConstraints(
              maxWidth: maxBubbleWidth,
            ),
            child: Container(
              decoration: BoxDecoration(
                color: Colors.grey[300],
                borderRadius: const BorderRadius.only(
                  topLeft: Radius.circular(0.0),
                  topRight: Radius.circular(10.0),
                  bottomLeft: Radius.circular(10.0),
                  bottomRight: Radius.circular(10.0),
                ),
              ),
              margin: const EdgeInsets.all(10.0),
              padding: const EdgeInsets.all(10.0),
              child: IntrinsicWidth(
                child: Column(
                  crossAxisAlignment: CrossAxisAlignment.start,
                  children: <Widget>[
                    Text(message,),
                    const SizedBox(height: 5.0),
                    Row(
                      mainAxisAlignment: MainAxisAlignment.end,
                      children: <Widget>[
                        Text(
                          time,
                          style: const TextStyle(
                            color: Colors.black54,
                            fontSize: 10.0,
                          ),
                        ),
                      ],
                    )
                  ],
                ),
              ),
            ),
          ),
        );
      },
    );
  }
}

这里是演示DartPad

Flutter Container-如何在不更改容器宽度的情况下对齐子文本？

3 个答案: