Flutter 文本布局

Question

我想将我的时间文本放在气泡聊天左侧的顶部或底部，例如 Line 应用程序消息。

这是我的：

目前它位于气泡左侧的中心。

这就是我想要的：

这是我的代码：

Row(
  mainAxisAlignment: MainAxisAlignment.end,
  children: [
    Column(
      crossAxisAlignment: CrossAxisAlignment.end,
      children: [
        Text(sendStatus,
        style: TextStyle(
          fontSize: 11
        ),),
        Text(date,
        style: TextStyle(
          fontSize: 11
        ),)
      ],
    ),
    Container(
      child: Align(
        alignment: Alignment.topRight,
        child :  Column(
        children: <Widget>[
          Stack(
            overflow: Overflow.visible,
            children: <Widget>[
              Container(
                child:  Align(
                  alignment: Alignment.topRight,
                  child: Column(
                  mainAxisSize: MainAxisSize.min,
                  children: <Widget>[
                  Container(
                  padding: EdgeInsets.symmetric(horizontal: 12,vertical: 12,),
                    margin: EdgeInsets.symmetric(horizontal: 10,vertical: 2),
                    decoration: BoxDecoration(
                      color: Color(0xFF2381d0),
                      borderRadius: BorderRadius.circular(5),
                    ),
                    child: Container(
                      constraints: BoxConstraints(maxWidth: 250),
                      child: Text(
                          message,
                          style: TextStyle(fontSize: 16,color: Colors.white),
                          textAlign: TextAlign.left,
                        maxLines: 100,
                        overflow: TextOverflow.ellipsis,
                        ),
                    ),

                  ),
                    SizedBox(width: 5,),
                  ],
                ),
                ),
              ),
              ...
            ],
          ),
        ],
      ),
      ),
    ),
  ],
);

有什么解决办法吗？

Answer 1

查看下面的示例我已经根据您的示例进行了一些更改：


void main() {
  runApp(const MyApp());
}

class MyApp extends StatefulWidget {
  const MyApp({Key? key}) : super(key: key);

  @override
  State<MyApp> createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
 
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: SafeArea(
        child: Scaffold(
          body: Column(mainAxisAlignment: MainAxisAlignment.end, children: [
            Row(
              mainAxisAlignment: MainAxisAlignment.end,
              children: [
                Column(
                  children: <Widget>[
                    Row(
                      mainAxisAlignment: MainAxisAlignment.end,
                      crossAxisAlignment: CrossAxisAlignment.end,
                      children: [
                        Padding(
                          padding: const EdgeInsets.only(bottom: 10),
                          child: Column(
                            mainAxisAlignment: MainAxisAlignment.end,
                            children: [
                              Text(
                                "Brian Miller",
                                style: TextStyle(fontSize: 11),
                              ),
                              Text(
                                "14/11/2021",
                                style: TextStyle(fontSize: 11),
                              )
                            ],
                          ),
                        ),
                        Align(
                          alignment: Alignment.topRight,
                          child: Column(
                            mainAxisSize: MainAxisSize.min,
                            children: <Widget>[
                              Container(
                                padding: EdgeInsets.symmetric(
                                  horizontal: 12,
                                  vertical: 12,
                                ),
                                margin: EdgeInsets.symmetric(
                                    horizontal: 10, vertical: 2),
                                decoration: BoxDecoration(
                                  color: Color(0xFF2381d0),
                                  borderRadius: BorderRadius.circular(5),
                                ),
                                child: Container(
                                  constraints: BoxConstraints(maxWidth: 250),
                                  child: Text(
                                    "This is the message for the recasdflasndfjansdkfkadf sadfaw eroisad faoisdf weorieiving end person",
                                    style: TextStyle(
                                        fontSize: 16, color: Colors.white),
                                    textAlign: TextAlign.left,
                                    maxLines: 100,
                                    overflow: TextOverflow.ellipsis,
                                  ),
                                ),
                              ),
                              SizedBox(
                                width: 5,
                              ),
                            ],
                          ),
                        ),
                      ],
                    ),
                  ],
                ),
              ],
            )
          ]),
        ),
      ),
    );
  }
}

这具有在左卡底部制作时间的功能。

Flutter 文本布局

Flutter text layout

flutter

flutter-layout