将文本包装在容器中，而无需在Flutter中使用固定宽度 [英] Wrap text in container without using a fixed width in Flutter
问题描述
我正在尝试在Flutter中创建一个基本的聊天应用程序，我想将对话显示在简单的容器中，以使其长度适合于内部文本.当出现溢出错误时，一切工作正常，直到文本不适合容器的长度为止.
I'm trying to create a basic chat application in Flutter and I want to display the conversation in simple containers which will adapt its length to the text inside. Everything works fine until the text does not fit the length of the container, when I get an overflow error.
我正在使用的代码就是这个
The code that I'm using is this one
Widget _buildMessage(Message message) {
return Row(children: <Widget>[
message.author == username ? Expanded(child: Container()) : Container(),
Container(
padding: EdgeInsets.all(8.0),
margin: EdgeInsets.all(4.0),
decoration: BoxDecoration(
color: Colors.white,
borderRadius: BorderRadius.all(Radius.circular(8.0))),
child: Row(
children: <Widget>[
Text(
message.text,
),
SizedBox(
width: 8.0,
),
Padding(
padding: EdgeInsets.only(top: 6.0),
child: Text(
message.time,
style: TextStyle(fontSize: 10.0, color: Colors.grey),
),
),
SizedBox(
width: 8.0,
),
Padding(
padding: EdgeInsets.only(top: 6.0),
child: Text(
message.author,
style: TextStyle(fontSize: 10.0, color: Colors.grey),
),
),
],
)),
message.author != username ? Expanded(child: Container()) : Container(),
]);
}
我正在使用行中的行"，以便根据作者的不同将其对齐. 如果在输入中键入带有多行的内容，则文本将正确呈现，容器将根据需要垂直扩展.问题是当我键入的内容超出容器的宽度时.
I'm using a Row within a Row so that I can get this alignment to the right or to the left depending on the author. If I type something with a multiline in my input, the text is rendered properly, with the container expanding vertically as needed. The problem is when I just type beyond the width of the container.
我可以通过用容器包裹文本并用来固定文本来解决此问题，但是我不希望这样，因为我希望宽度是动态的并适应文本.
I can fix this by wrapping the Text with a Container and a fixed with, but I don't want that as I want the width to be dynamic and adapt to the text.
我还看到了其他一些人们建议使用灵活"或扩展"的问题，但我不知道该怎么做.
I've seen other questions where people suggests using Flexible or Expanded, but I can't figure out how to do it.
任何想法都会受到赞赏.
Any ideas would be appreciated.
推荐答案
我尝试编辑您的代码，这就是我所做的:
I tried to edit your code and here is what I've made:
return Row(
mainAxisAlignment: message.author == username ? MainAxisAlignment.end : MainAxisAlignment.start,
//this will determine if the message should be displayed left or right
children: [
Flexible(
//Wrapping the container with flexible widget
child: Container(
padding: EdgeInsets.all(8.0),
margin: EdgeInsets.all(4.0),
decoration: BoxDecoration(
color: Colors.white,
borderRadius: BorderRadius.all(Radius.circular(8.0))),
child: Row(
mainAxisSize: MainAxisSize.min,
children: <Widget>[
Flexible(
//We only want to wrap the text message with flexible widget
child: Container(
child: Text(
message.text,
)
)
),
SizedBox(
width: 8.0,
),
Padding(
padding: EdgeInsets.only(top: 6.0),
child: Text(
message.time,
style: TextStyle(fontSize: 10.0, color: Colors.grey),
),
),
SizedBox(
width: 8.0,
),
Padding(
padding: EdgeInsets.only(top: 6.0),
child: Text(
message.author,
style: TextStyle(fontSize: 10.0, color: Colors.grey),
),
),
],
)),
)
]
);
这是我的伪代码的完整版本:
Here is the full version of my dummy code:
import 'package:flutter/material.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
home: MyHomePage(),
);
}
}
class MyHomePage extends StatefulWidget {
@override
_MyHomePageState createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
List<String> username = ['foo', 'bar', 'foo', 'bar', 'foo'];
List<String> messages = ['aaaaaaaaaaaaaaaaaaaaaaaaaaaaa', 'bb', 'cccccccccccccccccccccccccccccc', 'dddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddd', 'ee'];
List<String> time = ['131', '6454', '54564', '54546', '88888'];
List<String> author = ['Jesus', 'Joseph', 'Mary', 'John', 'Cardo'];
@override
Widget build(BuildContext context){
return Scaffold(
body: Container(
color: Colors.blue[200],
child: ListView.builder(
itemCount: 5,
itemBuilder: (_, int index){
return Row(
mainAxisAlignment: username[index] == "foo" ? MainAxisAlignment.end : MainAxisAlignment.start,
children: [
Flexible(
child: Container(
padding: EdgeInsets.all(8.0),
margin: EdgeInsets.all(4.0),
decoration: BoxDecoration(
color: Colors.white,
borderRadius: BorderRadius.all(Radius.circular(8.0))),
child: Row(
mainAxisSize: MainAxisSize.min,
children: <Widget>[
Flexible(
child: Container(
child: Text(
messages[index],
),
)
),
SizedBox(
width: 8.0,
),
Padding(
padding: EdgeInsets.only(top: 6.0),
child: Text(
time[index],
style: TextStyle(fontSize: 10.0, color: Colors.grey),
),
),
SizedBox(
width: 8.0,
),
Padding(
padding: EdgeInsets.only(top: 6.0),
child: Text(
author[index],
style: TextStyle(fontSize: 10.0, color: Colors.grey),
),
),
],
)),
)
]
);
}
)
)
);
}
}
这篇关于将文本包装在容器中，而无需在Flutter中使用固定宽度的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
