我正在尝试使包含“短标签”的 Row
与其下方的 Row
一样宽。
放置 mainAxisSize: MainAxisSize.max
是不够的,因为它应该匹配父宽度,基于这个答案:
The equivalent of wrap_content and match_parent in flutter?
尝试在行外使用Expanded
,但会导致错误,使用SizedBox.expand
也是如此。
不能使用像 width: double.infinity
这样的约束,因为左边的行(代码中的 //Left part
)必须只占用它需要的空间,其余的必须从黄色容器中取出。
屏幕截图和代码如下:
import 'package:flutter/material.dart';
void main() {
runApp(
MaterialApp(
debugShowCheckedModeBanner: false,
home: Scaffold(
body: Column(
children: [
Row(
children: [
// Left part
Row(
children: [
Column(children: [
// Error using Expanded ...
//Expanded(
//child:
Row(
mainAxisAlignment: MainAxisAlignment.end,
mainAxisSize: MainAxisSize.max,
children: [
Text('Short label:'),
Container(width: 20, height: 20, color: Colors.red),
],
),
//),
Row(
mainAxisAlignment: MainAxisAlignment.end,
mainAxisSize: MainAxisSize.max,
children: [
Text('Long text label:'),
Container(width: 20, height: 20, color: Colors.red),
],
),
]),
],
),
Expanded(
child: Container(
color: Colors.yellow,
height: 100,
),
),
],
),
],
),
),
),
);
}
编辑(旧的,检查下面的最终编辑)
IntrinsicWidth
是为行提供相同宽度的正确方法,正如 @mohandes 所建议的那样。
但如果我在下面添加另一行(下图中包含复选框的行),将行包装在两个 IntrinsicWidth
小部件内,则它不起作用。
复选框行应与上面一行一样宽,以便将复选框对齐到左侧。
在第一行中,我在右侧添加了一个橙色容器作为类似 block 的占位符。
屏幕截图和代码如下:
import 'package:flutter/material.dart';
void main() {
runApp(
MaterialApp(
debugShowCheckedModeBanner: false,
home: Scaffold(
body: Column(
children: [
Row(children: [
Column(
children: [
IntrinsicWidth(
child: Row(children: [
IntrinsicWidth(
child: Column(children: [
Row(
mainAxisAlignment: MainAxisAlignment.end,
children: [
Text('Short label 1:'),
Container(width: 20, height: 20, color: Colors.red),
],
),
Row(
mainAxisAlignment: MainAxisAlignment.end,
children: [
Text('Short label 123456:'),
Container(width: 20, height: 20, color: Colors.red),
],
),
]),
),
Padding(
padding: const EdgeInsets.all(8.0),
child: Container(
width: 40,
height: 40,
color: Colors.orange,
),
)
]),
),
IntrinsicWidth(
child: Row(
mainAxisAlignment: MainAxisAlignment.start,
mainAxisSize: MainAxisSize.max,
children: [
Checkbox(value: true, onChanged: null),
Text('Checkbox'),
],
),
),
],
),
Expanded(
child: Container(
color: Colors.yellow,
height: 100,
),
),
]),
],
),
),
),
);
}
编辑2
IntrinsicWidth
工作正常,第一个编辑中上面的代码的问题是我使用 IntrinsicWidth
作为子小部件(行)而不是父小部件(外柱)。
最佳答案
尝试在固有宽度小部件中添加包含行(长行和短行)的列。 固有宽度使所有子宽度成为最长子宽度。
关于layout - 行匹配父宽度,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/63088473/