Flutter中如何改变Widget在Column或Row中的显示顺序

Posted 2023-02-23

【中文标题】Flutter中如何改变Widget在Column或Row中的显示顺序

【英文标题】：how to change the displaying order of the Widgets in Column or Row in Flutter

【发布时间】：2021-09-06 02:13:50

【问题描述】：

我正在创建一个基本的聊天应用程序，其中我正在使用一个行小部件。行小部件应更改显示圆形头像的顺序。

具体来说，当前用户的图片必须在行首 其余用户的用户图像必须在行尾。

我可以通过使用bool isme 变量并使用“array if”输出来显示它，但我想知道有没有其他方法可以更有效地实现这一点。

我的意思是改变小部件的排列顺序 行

下面是我编码的...

 import 'package:flutter/material.dart';

class ChatBubble extends StatelessWidget 
 final String message;
 final bool isme;
 final String imageUrl;
 final Key key;
 final String username;
 ChatBubble(
   this.message,
   this.isme,
   this.username,
   this.imageUrl, 
   this.key,
 );
 @override
 Widget build(BuildContext context) 
   Size size = MediaQuery.of(context).size;
   var hei = size.height;
   var wid = size.width;
   return Row(
     crossAxisAlignment: CrossAxisAlignment.center,
     mainAxisAlignment: isme ? MainAxisAlignment.end : MainAxisAlignment.start,
     children: [
       if (isme) customCircleimage(),
       Column(
         crossAxisAlignment:
             isme ? CrossAxisAlignment.end : CrossAxisAlignment.start,
         children: [
           Padding(
             padding: EdgeInsets.only(
               right: isme ? 12.0 : 0.0,
               left: isme ? 0.0 : 12.0,
             ),
             child: Text(
               username,
             ),
           ),
           Container(
             height: hei * 0.1,
             width: wid * 0.5,
             padding: EdgeInsets.symmetric(
               vertical: hei * 0.015,
               horizontal: wid * 0.025,
             ),
             margin: EdgeInsets.symmetric(
               vertical: hei * 0.0015,
             ),
             alignment: Alignment.center,
             decoration: BoxDecoration(
               borderRadius: BorderRadius.only(
                 topLeft: Radius.circular(20.0),
                 topRight: Radius.circular(20.0),
                 bottomLeft: !isme ? Radius.zero : Radius.circular(20.0),
                 bottomRight: isme ? Radius.zero : Radius.circular(20.0),
               ),
               color: isme ? Colors.grey : Colors.pink,
             ),
             child: Text(
               message,
               softWrap: true,
               style: TextStyle(
                 color: Colors.white,
                 fontSize: 20.0,
               ),
             ),
           ),
         ],
       ),
       if (!isme) customCircleimage(),
     ],
   );
 

 Widget customCircleimage() 
   return CircleAvatar(
     backgroundColor: Colors.black,
     backgroundImage: NetworkImage(
       imageUrl,
     ),
     radius: 25.0,
   );
 

【参考方案1】：

您只需要切换isMe 条件。看看下面的代码。

import 'package:flutter/material.dart';

class ChatBubble extends StatelessWidget 
 final String message;
 final bool isme;
 final String imageUrl;
 final Key key;
 final String username;
 ChatBubble(
   this.message,
   this.isme,
   this.username,
   this.imageUrl, 
   this.key,
 );
 @override
 Widget build(BuildContext context) 
   Size size = MediaQuery.of(context).size;
   var hei = size.height;
   var wid = size.width;
   return Row(
     crossAxisAlignment: CrossAxisAlignment.center,
     mainAxisAlignment: isme ? MainAxisAlignment.end : MainAxisAlignment.start,
     children: [
       if (!isme) customCircleimage(),
       Column(
         crossAxisAlignment:
             isme ? CrossAxisAlignment.end : CrossAxisAlignment.start,
         children: [
           Padding(
             padding: EdgeInsets.only(
               right: isme ? 12.0 : 0.0,
               left: isme ? 0.0 : 12.0,
             ),
             child: Text(
               username,
             ),
           ),
           Container(
             height: hei * 0.1,
             width: wid * 0.5,
             padding: EdgeInsets.symmetric(
               vertical: hei * 0.015,
               horizontal: wid * 0.025,
             ),
             margin: EdgeInsets.symmetric(
               vertical: hei * 0.0015,
             ),
             alignment: Alignment.center,
             decoration: BoxDecoration(
               borderRadius: BorderRadius.only(
                 topLeft: Radius.circular(20.0),
                 topRight: Radius.circular(20.0),
                 bottomLeft: !isme ? Radius.zero : Radius.circular(20.0),
                 bottomRight: isme ? Radius.zero : Radius.circular(20.0),
               ),
               color: isme ? Colors.grey : Colors.pink,
             ),
             child: Text(
               message,
               softWrap: true,
               style: TextStyle(
                 color: Colors.white,
                 fontSize: 20.0,
               ),
             ),
           ),
         ],
       ),
       if (isme) customCircleimage(),
     ],
   );
 

 Widget customCircleimage() 
   return CircleAvatar(
     backgroundColor: Colors.black,
     backgroundImage: NetworkImage(
       imageUrl,
     ),
     radius: 25.0,
   );
 

【讨论】：

但我已经完成了.. 我问有没有办法改变列/行小部件的显示顺序...