[英]Flutter - How to put two Columns inside a Row, one Column expanded, the other fit its content text?
Is there a way to achieve this layout with flutter?有没有办法用 flutter 实现这种布局? With one Column expanded, and the other Column shrink to fit the texts inside, within a Row.
扩展一列,另一列缩小以适应行内的文本。
I'm from a web background, I know I can do it with Flex-grow and Flex-shring along with whitespace:nowrap.我来自 web 背景,我知道我可以使用 Flex-grow 和 Flex-shring 以及 whitespace:nowrap 来做到这一点。
I would like to achieve this layout我想实现这个布局
But in flutter I tried:但是在 flutter 我试过了:
Row(
crossAxisAlignment: CrossAxisAlignment.center,
children: [
Expanded(
child: Column(
mainAxisAlignment: MainAxisAlignment.start,
crossAxisAlignment: CrossAxisAlignment.stretch,
mainAxisSize: MainAxisSize.min,
children: [Text('Monthly Membership'), Text('Subscription')],
),
),
Flexible(
fit: FlexFit.tight,
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
crossAxisAlignment: CrossAxisAlignment.stretch,
mainAxisSize: MainAxisSize.min,
children: [
Text(
'+100',
maxLines: 1,
softWrap: false,
overflow: TextOverflow.fade,
),
Text(
'18 Sept 2021',
maxLines: 1,
softWrap: false,
overflow: TextOverflow.fade,
),
],
),
),
],
);
RenderBox was not laid out: RenderFlex#3024f relayoutBoundary=up1 NEEDS-PAINT NEEDS-COMPOSITING-BITS-UPDATE
RenderBox 未布置:RenderFlex#3024f relayoutBoundary=up1 NEEDS-PAINT NEEDS-COMPOSITING-BITS-UPDATE
Row(
crossAxisAlignment: CrossAxisAlignment.center,
children: [
Expanded(
child: Column(
mainAxisAlignment: MainAxisAlignment.start,
crossAxisAlignment: CrossAxisAlignment.stretch,
mainAxisSize: MainAxisSize.min,
children: [Text('Monthly Membership'), Text('Subscription')],
),
),
Column(
mainAxisAlignment: MainAxisAlignment.center,
crossAxisAlignment: CrossAxisAlignment.stretch,
mainAxisSize: MainAxisSize.min,
children: [
Text(
'+100',
maxLines: 1,
softWrap: false,
overflow: TextOverflow.fade,
),
Text(
'18 Sept 2021',
maxLines: 1,
softWrap: false,
overflow: TextOverflow.fade,
),
],
),
],
);
BoxConstraints forces an infinite width. BoxConstraints 强制无限宽度。
hasSize "RenderBox was not laid out: RenderFlex#c927e relayoutBoundary=up1 NEEDS-PAINT NEEDS-COMPOSITING-BITS-UPDATE" - that means the second column
doesn't get any width, that's you need to set fixed height or Expand
your widget. hasSize "RenderBox 未布局:RenderFlex#c927e relayoutBoundary=up1 NEEDS-PAINT NEEDS-COMPOSITING-BITS-UPDATE" - 这意味着第二
column
没有任何宽度,即您需要设置固定高度或Expand
您的小部件。
Row(
crossAxisAlignment: CrossAxisAlignment.center,
children: [
Expanded(
child: Column(
mainAxisAlignment: MainAxisAlignment.start,
crossAxisAlignment: CrossAxisAlignment.stretch,
mainAxisSize: MainAxisSize.min,
children: [Text('Monthly Membership'), Text('Subscription')],
),
),
Expanded(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
crossAxisAlignment: CrossAxisAlignment.stretch,
mainAxisSize: MainAxisSize.min,
children: [
Text(
'+100',
textAlign: TextAlign.end,
maxLines: 1,
softWrap: false,
overflow: TextOverflow.fade,
),
Text(
'18 Sept 2021',
textAlign: TextAlign.end,
maxLines: 1,
softWrap: false,
overflow: TextOverflow.fade,
),
],
),
),
],
)
And for more about flexible
and Expand
read this article有关
flexible
和Expand
的更多信息,请阅读本文
Your code-snippet just works fine, just missing alignment.您的代码片段运行良好,只是缺少 alignment。
About your desire UI, you just need to set alignment.关于你想要的 UI,你只需要设置 alignment。
Card(
color: Colors.grey,
child: Row(
crossAxisAlignment: CrossAxisAlignment.center,
children: [
Expanded(
child: Padding(
padding: const EdgeInsets.all(8.0),
child: Column(
mainAxisAlignment: MainAxisAlignment.spaceAround,
crossAxisAlignment: CrossAxisAlignment.start,
mainAxisSize: MainAxisSize.min,
children: const [
Text('Monthly Membership'),
SizedBox(height: 10),
Text('Subscription'),
],
),
),
),
Flexible(
fit: FlexFit.tight,
child: Padding(
padding: const EdgeInsets.all(8.0),
child: Column(
mainAxisAlignment: MainAxisAlignment.spaceAround,
crossAxisAlignment: CrossAxisAlignment.end,
mainAxisSize: MainAxisSize.min,
children: const [
Text(
'+100',
maxLines: 1,
softWrap: false,
overflow: TextOverflow.fade,
),
SizedBox(height: 10),
Text(
'18 Sept 2021',
maxLines: 1,
softWrap: false,
overflow: TextOverflow.fade,
),
],
),
),
),
],
),
),
Your second attempt fails because CrossAxisAlignment.stretch
takes all of the horizontal space available, but a Row
gives its children an unbounded width constraint.您的第二次尝试失败,因为
CrossAxisAlignment.stretch
占用了所有可用的水平空间,但Row
为其子项提供了无界宽度约束。 This forces the column to have infinite width, which is impossible.这迫使列具有无限宽度,这是不可能的。 There are two options to fix this:
有两个选项可以解决此问题:
crossAxisAlignment
crossAxisAlignment
This will make each child of the Column
take as much space as it's going to take.这将使
Column
的每个子项占用尽可能多的空间。 Based on your image, you probably want CrossAxisAlignment.center
, which will center the column's children.根据您的图像,您可能需要
CrossAxisAlignment.center
,它将使列的子项居中。 The column will take its width from the larger of the two Text widgets.该列将从两个 Text 小部件中较大的一个中获取其宽度。
Column(
mainAxisAlignment: MainAxisAlignment.center,
crossAxisAlignment: CrossAxisAlignment.center,
// ...
IntrinsicWidth
will measure the width that the Column wants to be, then give it that width. IntrinsicWidth
将测量 Column 想要的宽度,然后给它那个宽度。 This will give the Column
a tight width constraint in a second layout pass, which will make CrossAxisAlignment.stretch
work as intended.这将在第二次布局传递中为
Column
提供严格的宽度约束,这将使CrossAxisAlignment.stretch
按预期工作。
IntrinsicWidth(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
crossAxisAlignment: CrossAxisAlignment.stretch,
// ...
Both options will layout the second column with unbounded width, which means that if you have very long text, it might make the first column very small.这两个选项都会以无限宽度布局第二列,这意味着如果您有很长的文本,它可能会使第一列变得非常小。 If you want to bound the width of the column, you can add a
ConstrainedBox
to either solution.如果要限制列的宽度,可以将
ConstrainedBox
添加到任一解决方案。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.