как изменить порядок отображения виджетов в столбце или строке в Flutter

#flutter #dart #flutter-layout #flutter-widget

Вопрос:

Я создаю базовое приложение для чата, в котором я использую виджет строки. Виджет строки должен изменить порядок отображения circleavatar.

  1. в деталях изображение текущего пользователя должно быть в начале строки
  2. а изображение пользователя остальных пользователей должно быть в конце строки.

Я могу отобразить это с помощью bool 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,
   );
 }
}

 

Ответ №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,
   );
 }
}
 

Комментарии:

1. но я уже сделал это .. я спрашиваю, есть ли способ изменить порядок отображения виджета столбца/ строки…