Flutter中如何改变小部件在列或行中的显示顺序

Question

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

1. 详细地说，当前用户的图像必须在行的开头
2. 其余用户的用户图像必须在行尾。

我可以通过使用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,
   );
 }
}

Answer 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,
   );
 }
}