英文:
How do I make this chat message line up its properties correctly?
问题
以下是您要翻译的内容：
这是一个群聊中的单条聊天消息行。我需要它看起来像这样：
圆形区域将容纳来自 assets/profileIcons 中一组图像资源中的任何一个。我尝试使用下面的代码模拟圆形区域（临时），但无论我选择什么颜色，图标都不会显示出来。我只看到一个白色空白。另外，用户名与消息字段没有整齐对齐。我很困惑。我希望有一种使用 GUI 构建这个的方法，因为小部件的级联 child 很难阅读。
return Column(
children: [
Row(
children: [
Expanded(
flex: 5,
child: Container(
margin: EdgeInsets.all(50.0),
decoration: BoxDecoration(
color: Colors.red,
shape: BoxShape.circle,
),
),
),
Expanded(
flex: 8,
child: Text(username),
),
Expanded(
flex: 15,
child: Text(''),
),
],
),
Row(
children: [
SizedBox(
width: 20,
),
Container(
constraints: BoxConstraints(
maxWidth: MediaQuery.of(context).size.width * 0.5,
),
padding: EdgeInsets.only(
left: 15,
top: 15,
right: 15,
bottom: 15,
),
decoration: BoxDecoration(
color: Color.fromRGBO(66, 135, 245, 100.0),
borderRadius: BorderRadius.circular(30),
),
child: Wrap(
children: [
Text(text),
],
),
),
],
),
],
);
英文:
This is a single row for a chat message in a group chat. I need it to look like this:
The circular area is going to hold any one of a set of image assets from assets/profileIcons. I tried to simulate the circular area (temporarily) using the code below, but the icon doesn't show up no matter what color I pick. All I see is a white space there. Also, the username is not neatly lining up with the message field. I'm so confused. I wish there was a way to build this with a GUI because the cascading childs of a widget is really annoying to read.
return Column(
children: [
Row(
children: [
Expanded(flex: 5,
child: Container(
margin: EdgeInsets.all(50.0),
decoration: BoxDecoration(
color: Colors.red,
shape: BoxShape.circle
),
)
),
Expanded(flex: 8, child: Text(username)),
Expanded(flex: 15, child: Text('')),
],
),
Row(
children: [
SizedBox(width: 20,),
Container(
constraints: BoxConstraints(maxWidth: MediaQuery.of(context).size.width * 0.5),
padding: EdgeInsets.only(left: 15, top: 15, right: 15, bottom: 15),
decoration: BoxDecoration(
color: Color.fromRGBO(66, 135, 245, 100.0),
borderRadius: BorderRadius.circular(30),
),
child: Wrap(
children: [
Text(text),
],
),
),
],
),
],
);
答案1
得分: 1
请尝试这个！希望这个答案对您有帮助。
根据您的要求，当您点击特定消息时，消息下方会显示日期。
查看输出
import 'package:flutter/material.dart';
class ChatScreen extends StatefulWidget {
const ChatScreen({Key? key}) : super(key: key);
@override
State<ChatScreen> createState() => _ChatScreenState();
}
class _ChatScreenState extends State<ChatScreen> {
int? selectedIndex;
@override
Widget build(BuildContext context) {
return Scaffold(
backgroundColor: Colors.white,
body: SafeArea(
child: ListView.builder(
itemCount: 5,
itemBuilder: (BuildContext context, int index) {
final isSelected = index == selectedIndex;
return Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
FractionallySizedBox(
widthFactor: 1.0, // 设置列表项的宽度
child: ListTile(
onTap: () {
setState(() {
selectedIndex = isSelected ? null : index;
});
},
leading: const CircleAvatar(
child: FlutterLogo(),
),
title: Text('Username ${index + 1}',
style: const TextStyle(
fontWeight: FontWeight.bold, fontSize: 16)),
subtitle: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text('这是消息 ${index + 1}'),
Visibility(
visible:
isSelected, // 用于在点击消息时显示/隐藏日期
child: Text(
DateTime.now().toString(),
),
),
],
),
),
),
],
);
}),
),
);
}
}
英文:
Try this! I hope this answer is helpful to you.
.
As per your requirement, when you tap on a particular message date is shown below the message.
.
View Output
import 'package:flutter/material.dart';
class ChatScreen extends StatefulWidget {
const ChatScreen({Key? key}) : super(key: key);
@override
State<ChatScreen> createState() => _ChatScreenState();
}
class _ChatScreenState extends State<ChatScreen> {
int? selectedIndex;
@override
Widget build(BuildContext context) {
return Scaffold(
backgroundColor: Colors.white,
body: SafeArea(
child: ListView.builder(
itemCount: 5,
itemBuilder: (BuildContext context, int index) {
final isSelected = index == selectedIndex;
return Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
FractionallySizedBox(
widthFactor: 1.0, // set width of listtile
child: ListTile(
onTap: () {
setState(() {
selectedIndex = isSelected ? null : index;
});
},
leading: const CircleAvatar(
child: FlutterLogo(),
),
title: Text('Username ${index + 1}',
style: const TextStyle(
fontWeight: FontWeight.bold, fontSize: 16)),
subtitle: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text('This is message ${index + 1}'),
Visibility(
visible:
isSelected, // used for show/hide date when message is clicked on
child: Text(
DateTime.now().toString(),
),
),
],
),
),
),
],
);
}),
),
);
}
}
答案2
得分: 0
return Scaffold(
body: Column(
children: [
ListTile(
leading: CircleAvatar(backgroundColor: Colors.red,),
title: Text("用户名1"),
subtitle: Text("消息1"),
),
SizedBox(height: 10),
ListTile(
leading: CircleAvatar(backgroundColor: Colors.blue),
title: Text("用户名2"),
subtitle: Text("消息2"),
),
],
),
);
英文:
Heading ##listtile ##leading ##chat ## return Scaffold(
body: Column(
children: [
ListTile(
leading: CircleAvatar(backgroundColor: Colors.red,),
title: Text("Username1"),
subtitle: Text("message1"),
),
SizedBox(height: 10),
ListTile(
leading: CircleAvatar(backgroundColor: Colors.blue),
title: Text("Username2"),
subtitle: Text("message2"),
),
],
),
);
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论