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