英文:
Why isn't CrossAxisAlignment.end working here?
问题
在ListView中，我返回的要么是左对齐的小部件，要么是右对齐的小部件。左对齐正常工作，但用户名的右对齐不起作用。为什么会这样？
Widget myRegularMessageWidget(String uid, String username, int timestamp, String text) {
return Column(
crossAxisAlignment: CrossAxisAlignment.end,
children: [
Container(
decoration: BoxDecoration(
border: Border.all(color: Colors.blueAccent)
),
child: FractionallySizedBox(
widthFactor: 1,
child: ListTile(
title: Text(username,
style: const TextStyle(
fontWeight: FontWeight.bold,
fontSize: 16)
),
subtitle: Column(
crossAxisAlignment: CrossAxisAlignment.end,
children: [
Text(text),
],
),
),
),
),
],
);
}
Widget otherUserRegularMessageWidget(String uid, String username, int timestamp, String text) {
return Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Container(
decoration: BoxDecoration(
border: Border.all(color: Colors.blueAccent)
),
child: FractionallySizedBox(
widthFactor: 0.75,
child: ListTile(
leading: const CircleAvatar(
child: FlutterLogo(),
),
title: Text(username,
style: const TextStyle(
fontWeight: FontWeight.bold, fontSize: 16)),
subtitle: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text(text),
],
),
),
),
),
],
);
}
输出的图片如下（由于某种原因，正常添加图片的方式无法使用）：
英文:
In a ListView I am returning either a left aligned widget or a right aligned widget. The left alignment is working fine, but the right alignment isn't for the username. Why is this?
Widget myRegularMessageWidget(String uid, String username, int timestamp, String text) {
return Column(
crossAxisAlignment: CrossAxisAlignment.end,
children: [
Container(
decoration: BoxDecoration(
border: Border.all(color: Colors.blueAccent)
),
child: FractionallySizedBox(
widthFactor: 1,
child: ListTile(
title: Text(username,
style: const TextStyle(
fontWeight: FontWeight.bold,
fontSize: 16)
),
subtitle: Column(
crossAxisAlignment: CrossAxisAlignment.end,
children: [
Text(text),
],
),
),
),
),
],
);
}
Widget otherUserRegularMessageWidget(String uid, String username, int timestamp, String text) {
return Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Container(
decoration: BoxDecoration(
border: Border.all(color: Colors.blueAccent)
),
child: FractionallySizedBox(
widthFactor: 0.75,
child: ListTile(
leading: const CircleAvatar(
child: FlutterLogo(),
),
title: Text(username,
style: const TextStyle(
fontWeight: FontWeight.bold, fontSize: 16)),
subtitle: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text(text),
],
),
),
),
),
],
);
}
Image of the output (for some reason the normal way to add a pic isn't working):
答案1
得分: 1
不需要为显示您的消息和其他用户消息创建两个单独的函数，只需将Username、Message小部件包装在一个Column中，并添加一个条件来显示左/右。
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 FractionallySizedBox(
widthFactor: 1, // 设置列表项的宽度
child: ListTile(
onTap: () {
setState(() {
selectedIndex = isSelected ? null : index;
});
},
leading: if (uid == 'myId')
const CircleAvatar(
child: FlutterLogo(),
)
else
const SizedBox.shrink(),
title: Column(
crossAxisAlignment: uid != 'myId'
? CrossAxisAlignment.end
: CrossAxisAlignment.start,
children: [
Text(
'Username ${index + 1}',
style: const TextStyle(
fontWeight: FontWeight.bold,
fontSize: 16,
),
),
],
),
trailing: if (uid != 'myId')
const CircleAvatar(
child: FlutterLogo(),
)
else
const SizedBox.shrink(),
subtitle: Column(
crossAxisAlignment: uid != 'myId'
? CrossAxisAlignment.end
: CrossAxisAlignment.start,
children: [
Text('This is message ${index + 1}'),
Visibility(
visible: isSelected,
child: Text(
DateTime.now().toString(),
),
),
],
),
),
);
},
),
),
);
}
}
注意： 您需要将上面代码中的 index % 2 这个条件替换为您的用户ID或用户名，例如 if (uid == 'myId') 然后使用 CrossAxisAlignment.end，否则使用 CrossAxisAlignment.start，在上面的代码段中的所有地方以获取所需的输出。
英文:
No need to create two separate functions for showing your message and other user messages just wrap Username, Message widget with a column and add a condition for showing left/right.
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 FractionallySizedBox(
widthFactor: 1, // set width of listtile
child: ListTile(
onTap: () {
setState(() {
selectedIndex = isSelected ? null : index;
});
},
leading: index % 2 == 0
? const CircleAvatar(
child: FlutterLogo(),
)
: const SizedBox.shrink(),
title: Column(
crossAxisAlignment: index % 2 != 0
? CrossAxisAlignment.end
: CrossAxisAlignment.start,
children: [
Text(
'Username ${index + 1}',
style: const TextStyle(
fontWeight: FontWeight.bold, fontSize: 16),
),
],
),
trailing: index % 2 != 0
? const CircleAvatar(
child: FlutterLogo(),
)
: const SizedBox.shrink(),
subtitle: Column(
crossAxisAlignment: index % 2 != 0
? CrossAxisAlignment.end
: 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(),
),
),
],
),
),
);
}),
),
);
}
}
Note: You need to replace index % 2 this condition with your uid or username like if (uid == 'myId') then CrossAxisAlignment.end or else CrossAxisAlignment.start. Everywhere in the above snippet for getting the desire output.
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论