英文:
Make a Column of Columns scrollable
问题
我想要使一个小部件可滚动，它基本上是一个包含其他列的列。
我的 TreeWidget 可能包含一个或多个类似的 TreeWidget。我尝试将其包装在一个类似如下的 SingleChildScroolView 中：
SingleChildScrollView {
TreeWidget {
TreeWidget{
TreeWidget {
Column {
Text( 'something' )
Text( 'something' )
}
}
}
}
}
请注意，我事先不知道任何 TreeWidget 的大小。除非我首先向下遍历树，收集高度，最后计算总高度。
当渲染时，Flutter 抱怨尺寸无限大。
因此我的问题是：如何使类似上面的递归小部件可滚动？
错误信息：
相关引发错误的小部件是：Column
Column:file:///..path.../lib/main_widget.dart:46:16溢出的 RenderFlex 具有 Axis.vertical 方向。溢出的 RenderFlex 的边缘在渲染中以黄色和黑色条纹的图案标记了出来。通常这是由于内容对于 RenderFlex 来说太大了。
考虑应用一个灵活因子（例如使用 Expanded 小部件）来强制 RenderFlex 的子项适应可用空间，而不是调整为它们的自然大小。这被认为是一个错误条件，因为它表明存在无法看到的内容。如果内容确实比可用空间大，请在将其放入 Flex 之前使用 ClipRect 小部件进行剪裁，或者使用可滚动容器而不是 Flex，如 ListView。
英文:
I'd like to make a widget scrollable, which is basically Column which contains other columns.
My TreeWidget may contain one or more TreeWidgets like so. I tried to wrap it inside a SingleChildScroolView like so:
SingleChildScrollView {
TreeWidget {
TreeWidget{
TreeWidget {
Column {
Text( 'something' )
Text( 'something' )
}
}
}
}
}
Note, that I do not know the size of any TreeWidget beforehand. Unless I first walk the tree downwards, collect heights and finally compute the total height.
When this renders, Flutter complains about infinite size.
Thus my question: How to I make a recursive widget like the above scrollable?
> Error Message:
>
> The relevant error-causing widget was: Column
> Column:file:///..path.../lib/main_widget.dart:46:16
>
> The overflowing RenderFlex has an orientation of Axis.vertical. The
> edge of the RenderFlex that is overflowing has been marked in the
> rendering with a yellow and black striped pattern. This is usually
> caused by the contents being too big for the RenderFlex.
>
> Consider applying a flex factor (e.g. using an Expanded widget) to
> force the children of the RenderFlex to fit within the available space
> instead of being sized to their natural size. This is considered an
> error condition because it indicates that there is content that cannot
> be seen. If the content is legitimately bigger than the available
> space, consider clipping it with a ClipRect widget before putting it
> in the flex, or using a scrollable container rather than a Flex, like
> a ListView.
答案1
得分: 1
如果您的TreeWidget内部包含一个Column，您可能需要"展开"其中每个列，以便它们位于其他列内。例如：
SingleChildScrollView(
child: Column(
children: [
Expanded( // 您需要指定该列占用其他列内的可用空间
child: Column(...)
),
...
]
),
);
或者，您可以尝试将所有内容包装在SizedBox内，并使用其height属性设置固定高度。这个height属性也可以设置为MediaQuery.of(context).size.height，以使其动态调整为全屏高度。
英文:
If your TreeWidget contains a Column internally, you likely need to "Expanded" each of the columns inside other columns. For example:
SingleChildScrollView(
child: Column(
children: [
Expanded( // you need to say that the column takes up the available space inside the other column
child: Column(...)
),
...
]
),
);
And/or, you can possibly wrap everything inside a SizedBox and give it a fixed height using its height property. This height property could also be set to MediaQuery.of(context).size.height for it to dynamically size to the full screen height.
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论