英文:
Bottom Overflowed in ListTile - Flutter
问题
我已经创建了一个ListTile来从Firestore中的集合中返回所有我的文档。但我想在数字之前放置“R$”，而不是在数字上面。
是否有方法可以实现这个？另外，我想知道是否有办法在ListTile之前放置更多信息。当我尝试创建一个Text时，它给我一个错误。
这是代码：
class FinancasMensais extends StatefulWidget {
const FinancasMensais({super.key});
@override
State<FinancasMensais> createState() => _FinancasMensaisState();
}
class _FinancasMensaisState extends State<FinancasMensais> {
final _fireStore = FirebaseFirestore.instance;
final ref = FirebaseFirestore.instance.collection('addsaidas').snapshots();
Future<void> getData() async {
QuerySnapshot querySnapshot =
await _fireStore.collection('addsaidas').get();
final allData = querySnapshot.docs.map((doc) => doc.data()).toList();
for (var dataMap in allData) {
if (dataMap is Map) {
for (var key in dataMap.keys) {
print('$key: ${dataMap[key]}');
}
print('----------------------');
}
}
}
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
backgroundColor: Color.fromARGB(255, 92, 172, 178),
centerTitle: true,
title: Text('Finanças Mensais'),
toolbarHeight: 90,
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(40),
),
elevation: 15,
),
body: StreamBuilder<QuerySnapshot>(
stream: ref,
builder: (context, snapshot) {
if (!snapshot.hasData) {
return const Center(child: CircularProgressIndicator());
}
final documents = snapshot.data!.docs;
return ListView.builder(
itemCount: documents.length,
itemBuilder: (context, index) {
final document = documents[index];
final data = document.data() as Map<String, dynamic>;
return ListTile(
contentPadding:
EdgeInsets.only(left: 15, right: 15, top: 15, bottom: 4),
leading: Icon(
Icons.where_to_vote_outlined,
color: Colors.pink,
size: 36,
),
title: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text(
data['nomesaida'],
style: TextStyle(
fontSize: 22,
),
),
Text(data['tipocategoria']),
],
),
trailing: Column(
mainAxisAlignment: MainAxisAlignment.center,
crossAxisAlignment: CrossAxisAlignment.end,
children: [
Text(
"R\$",
style: TextStyle(
fontSize: 15,
),
),
Text(
data['valorsaida'] as String,
style: TextStyle(
color: Colors.pink,
fontSize: 28,
),
),
Text(
data['datasaida'],
style: TextStyle(
color: Colors.pink,
),
),
],
),
dense: false,
);
},
);
},
),
);
}
}
如果您有其他问题，请随时提出。
英文:
I have created a ListTile to return all my documents from my collection in Firestore. But I want to put "R$" before the number, not above it:
Is there a way to do it? Also, I would like to know if there is how to put more information before the ListTile. When I try to create a Text, it gives me an error:
This is the code:
class FinancasMensais extends StatefulWidget {
const FinancasMensais({super.key});
@override
State<FinancasMensais> createState() => _FinancasMensaisState();
}
class _FinancasMensaisState extends State<FinancasMensais> {
final _fireStore = FirebaseFirestore.instance;
final ref =
FirebaseFirestore.instance.collection('addsaidas').snapshots();
Future<void> getData() async {
QuerySnapshot querySnapshot =
await _fireStore.collection('addsaidas').get();
final allData = querySnapshot.docs.map((doc) => doc.data()).toList();
for (var dataMap in allData) {
if (dataMap is Map) {
for (var key in dataMap.keys) {
print('$key: ${dataMap[key]}');
}
print('----------------------');
}
}
}
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
backgroundColor: Color.fromARGB(255, 92, 172, 178),
centerTitle: true,
title: Text('Finanças Mensais'),
toolbarHeight: 90,
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(40)
),
elevation: 15,
),
body: StreamBuilder<QuerySnapshot>(
//child: Center(child: Text('Todo Task'),),
stream: ref,
builder: (context, snapshot) {
if (!snapshot.hasData) {
return const Center(child: CircularProgressIndicator());
}
final documents = snapshot.data!.docs;
return ListView.builder(
itemCount: documents.length,
itemBuilder: (context, index) {
final document = documents[index];
final data = document.data() as Map<String, dynamic>;
return ListTile(
contentPadding: EdgeInsets.only(left: 15, right: 15, top: 15, bottom: 4),
leading: Icon(Icons.where_to_vote_outlined,
color: Colors.pink,
size: 36,
),
title: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text(data['nomesaida'],
style: TextStyle(
fontSize: 22,
),),
Text(data['tipocategoria']),
],
),
trailing: Column(
mainAxisAlignment: MainAxisAlignment.center,
crossAxisAlignment: CrossAxisAlignment.end,
children: [
Text("R\$",
style: TextStyle(
fontSize: 15
),
),
Text(data['valorsaida'] as String,
style: TextStyle(
color: Colors.pink,
fontSize: 28,
),),
Text(data['datasaida'],
style: TextStyle(
color: Colors.pink
),),
],
),
dense: false,
);
},
);
},
),
);
}
}
答案1
得分: 2
- 在上述代码中，在数字前面放置特定文本
- 在List Tile Widget前面添加文本
让我们讨论一下你的方法可能存在的问题。
- 你将特定文本和数字分别编码。为了避免这样做，你应该在单个Text Widget中添加两个字段，如下所示（假设没有样式约束）：
Text('R\$ ${data['valorsaida']}',
style: TextStyle(
color: Colors.pink,
fontSize: 28,
),
),
如果有样式约束，请尝试使用RichText Widget。
- 要在ListTile前添加信息，请尝试使用Column：
// 返回一个Column而不是ListTile，如下所示：
return Column(
mainAxisSize: MainAxisSize.min,
children: [
// 在这里添加你的文本
Center(child: Text('Todo Task')),
// 在这里添加你的ListTile
ListTile(...),
],
);
希望这对你有帮助。
英文:
Let me outline what you want to do with the above code:
- Put specific text before the number
- Add text before List Tile Widget
Let's talk about where you may be wrong with your approach.
- You are coding both the specific text and number separately. To avoid doing this you should add both fields in a single Text Widget like this(assuming there are no styling constraints):
Text('R\$ ${data['valorsaida']}',
style: TextStyle(
color: Colors.pink,
fontSize: 28,
),
),
Assuming you have styling constraints to adhere to, try using RichText Widget.
- To add information before ListTile, try using Column:
// return column instead of ListTile like this:
return Column(
mainAxisSize: MainAxisSize.min,
children: [
//Your Text here
Center(child: Text('Todo Task')),
//Your ListTile here
ListTile(...),
],
);
Hope this helps you.
答案2
得分: 1
// const Text(
// "R\$",
// style: TextStyle(fontSize: 15),
// ),
// Text(
// data['valorsaida'] as String,
// style: const TextStyle(
// color: Colors.pink,
// fontSize: 28,
// ),
// ),
/// Put it inside a row to align horizontally
Row(
/// Align the children to the right.
mainAxisAlignment: MainAxisAlignment.end,
/// Make the row as small as possible.
/// If you don't do this, the row will take up the entire width of the screen.
/// And you'll get a flutter exception.
mainAxisSize: MainAxisSize.min,
children: [
const Text(
"R\$",
style: TextStyle(fontSize: 15),
),
Text(
(data['valorsaida'] as num).toString(),
style: const TextStyle(
color: Colors.pink,
fontSize: 28,
),
),
],
),
But you can also use the intl library to format currency for you. Give a try to that.
英文:
Duda!
The R$ is above the number cause you're putting all of them inside a Column - that aligns the children always vertically.
To make the R$ appears at the left of the number, you can wrap both inside a Row.
// const Text(
// "R\$",
// style: TextStyle(fontSize: 15),
// ),
// Text(
// data['valorsaida'] as String,
// style: const TextStyle(
// color: Colors.pink,
// fontSize: 28,
// ),
// ),
/// Put it inside a row to align horizontally
Row(
/// Align the children to the right.
mainAxisAlignment: MainAxisAlignment.end,
/// Make the row as small as possible.
/// If you don't do this, the row will take up the entire width of the screen.
/// And you'll get a flutter exception.
mainAxisSize: MainAxisSize.min,
children: [
const Text(
"R\$",
style: TextStyle(fontSize: 15),
),
Text(
(data['valorsaida'] as num).toString(),
style: const TextStyle(
color: Colors.pink,
fontSize: 28,
),
),
],
),
But you can also use the intl library to format currency for you. Give a try to that.
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论