#flutter #dart #flutter-layout #flutter-widget
Вопрос:
Я создаю базовое приложение для чата, в котором я использую виджет строки. Виджет строки должен изменить порядок отображения circleavatar.
- в деталях изображение текущего пользователя должно быть в начале строки
- а изображение пользователя остальных пользователей должно быть в конце строки.
Я могу отобразить это с помощью 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. но я уже сделал это .. я спрашиваю, есть ли способ изменить порядок отображения виджета столбца/ строки…