如何将文本小部件放置在具有最大宽度的容器的水平端,而不展开它
How can i place text widget at the horizontal end of a container with a max width, without expanding it
我有一个卡片小部件,它用给定的最大宽度包裹了一个容器小部件,这就是它的样子:
这是下面的代码:
Card(
child: Container(
constraints: new BoxConstraints(
maxWidth: 250.0,
),
margin: EdgeInsets.symmetric(horizontal: 10.0, vertical: 10.0),
child: Row(
mainAxisAlignment: MainAxisAlignment.start,
mainAxisSize: MainAxisSize.min,
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
new Flexible(
child: new Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
new Container(
margin: const EdgeInsets.only(top: 5.0),
child: new Text(messageSnapshot.inbox),
),
],
),
),
],
),
))
当我尝试在其下创建另一个文本小部件时出现问题,我特别想移动到第一个文本下方的最右边,这就是我得到的:
我添加的第二个文本小部件扩展,达到我想要的最末端,但也将卡片扩展到我设置的最大宽度。这是它的代码:
Card(
child: Container(
constraints: new BoxConstraints(
maxWidth: 250.0,
),
margin: EdgeInsets.symmetric(horizontal: 10.0, vertical: 10.0),
child: Row(
mainAxisAlignment: MainAxisAlignment.start,
mainAxisSize: MainAxisSize.min,
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
new Flexible(
child: new Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
new Container(
margin: const EdgeInsets.only(top: 5.0),
child: new Text(messageSnapshot.inbox),
),
Row(
mainAxisAlignment: MainAxisAlignment.end,
children: <Widget>[
Text("3:18am")
],
)
],
),
),
],
),
))
但这就是我想要的
日期位于容器末尾的水平位置 space 创建的初始文本未展开。
我该如何解决这个问题?
将 Flexible
小部件内的元素包装在 IntrinsicWidth
小部件内。这将使 Column
中的所有 children 具有相同的宽度。然后,在第二个元素的 Row
中添加一个 MainAxisSize.max
属性,因此它将模仿第一个元素的宽度并遵循 MainAxisAlign.end
属性 的方式想要。
new Flexible(
child: new IntrinsicWidth(
child: new Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
new Container(
margin: const EdgeInsets.only(top: 5.0),
child: new Text(
messageSnapshot.inbox,
),
),
Row(
mainAxisAlignment: MainAxisAlignment.end,
mainAxisSize: MainAxisSize.max,
children: <Widget>[
Text(
"3:18am",
),
],
)
],
),
),
),
我有一个卡片小部件,它用给定的最大宽度包裹了一个容器小部件,这就是它的样子:
这是下面的代码:
Card(
child: Container(
constraints: new BoxConstraints(
maxWidth: 250.0,
),
margin: EdgeInsets.symmetric(horizontal: 10.0, vertical: 10.0),
child: Row(
mainAxisAlignment: MainAxisAlignment.start,
mainAxisSize: MainAxisSize.min,
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
new Flexible(
child: new Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
new Container(
margin: const EdgeInsets.only(top: 5.0),
child: new Text(messageSnapshot.inbox),
),
],
),
),
],
),
))
当我尝试在其下创建另一个文本小部件时出现问题,我特别想移动到第一个文本下方的最右边,这就是我得到的:
我添加的第二个文本小部件扩展,达到我想要的最末端,但也将卡片扩展到我设置的最大宽度。这是它的代码:
Card(
child: Container(
constraints: new BoxConstraints(
maxWidth: 250.0,
),
margin: EdgeInsets.symmetric(horizontal: 10.0, vertical: 10.0),
child: Row(
mainAxisAlignment: MainAxisAlignment.start,
mainAxisSize: MainAxisSize.min,
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
new Flexible(
child: new Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
new Container(
margin: const EdgeInsets.only(top: 5.0),
child: new Text(messageSnapshot.inbox),
),
Row(
mainAxisAlignment: MainAxisAlignment.end,
children: <Widget>[
Text("3:18am")
],
)
],
),
),
],
),
))
但这就是我想要的
日期位于容器末尾的水平位置 space 创建的初始文本未展开。
我该如何解决这个问题?
将 Flexible
小部件内的元素包装在 IntrinsicWidth
小部件内。这将使 Column
中的所有 children 具有相同的宽度。然后,在第二个元素的 Row
中添加一个 MainAxisSize.max
属性,因此它将模仿第一个元素的宽度并遵循 MainAxisAlign.end
属性 的方式想要。
new Flexible(
child: new IntrinsicWidth(
child: new Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
new Container(
margin: const EdgeInsets.only(top: 5.0),
child: new Text(
messageSnapshot.inbox,
),
),
Row(
mainAxisAlignment: MainAxisAlignment.end,
mainAxisSize: MainAxisSize.max,
children: <Widget>[
Text(
"3:18am",
),
],
)
],
),
),
),