flutter - Flutter中如何改变Widget在Column或Row中的显示顺序
问题描述
我正在创建一个基本的聊天应用程序,在那里我使用了一个行小部件。行小部件应更改显示 circleavatar 的顺序。
- 具体来说,当前用户的图像必须在行首
- 其余用户的用户图像必须位于行尾。
我可以通过使用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,
);
}
}
解决方案
您只需要切换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,
);
}
}
推荐阅读
- sql-server - 为 AlwaysON AG 创建 WSFC
- asp.net-core - 使用 App Metrics 和 Influxdb 监控 kubernetes 中的 aspnet 核心 Web 应用程序不起作用
- google-maps - 如何在反应原生地图中添加粘性组件?
- mysql - Concat 使用两个不同的表
- java - 渲染由三角形组成的立方体会在旋转时产生奇怪的角度
- mysql - MySQL 查询:如何在 Django 中编写?
- scala - 如何将参数传递给scala中的方法
- prometheus - Prometheus Docker 无法以`Template: (dynamic): parse: template: :10: undefined variable "$labels"` 开始
- gradle - Gradle:如何为发行版插件创建的 ZIP 文件生成 sha-256 哈希?
- c# - 如何获取可能为空的数据库字段的长度