我正在构建一个小部件来在一个固定大小的窗口中显示图表/图形。图表将比窗口大,因此解决方案包括用户能够在窗口中滚动图形小部件(您可以在前面的问题中找到关于此的详细信息)。
布局的一部分包括一个使用SizedBox
创建的固定大小的面板,在该面板中,Column
包含组成图形的多行小部件。我需要Column紧密地适应其内容,以便可以跟踪其大小,例如,当最后一行在SizedBox底部可见时,停止用户向上滚动。
当Column中子元素的大小使Column小于SizedBox时,Column仍然会被强制为SizedBox的大小。这在Flutter文档here中有解释。
根据Flutter文档,解决方案为:
这可以通过将子SizedBox Package 在一个小部件中来解决,该小部件允许它的大小不超过父控件的大小,例如Center或Align。
我试过了,但似乎不起作用。下面是我在DartPad上编写的一个测试应用程序来验证这一点。如果我使用Align或Center作为SizedBox的子控件和Column小部件的父控件,Column仍然与SizedBox的大小相同。我还向Column添加了MainAxisSize.min
,但这似乎没有任何区别。
我曾考虑过使用Stack
来实现这一点,以便在SizedBox上显示Column,而不是将其显示为它的子元素,但考虑到文档建议您可以控制SizedBox内Column的大小,这感觉有点像是一个笨拙的解决方案。
有人知道我如何强制列成为最小的大小,它可以在一个固定大小的大小框?
import 'package:flutter/material.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
List<Widget> graphWidgets = const [
Text(
'long-line-of-text-long-line-of-text-long-line-of-text-long-line-of-text-long-line-of-text-long-line-of-text-long-line-of-text'),
Text(
'long-line-of-text-long-line-of-text-long-line-of-text-long-line-of-text-long-line-of-text-long-line-of-text-long-line-of-text'),
Text(
'long-line-of-text-long-line-of-text-long-line-of-text-long-line-of-text-long-line-of-text-long-line-of-text-long-line-of-text'),
];
@override
Widget build(BuildContext context) {
return MaterialApp(
theme: ThemeData.light(),
debugShowCheckedModeBanner: false,
home: Scaffold(
body: Center(
child: SizedBox(
// This is the window the chart is displayed in
height: 200,
width: 400,
child: DecoratedBox(
decoration: BoxDecoration(
border: Border.all(),
),
child: OverflowBox(
// Used to prevent graph rows from wrapping in the window
maxHeight: double.infinity,
maxWidth: double.infinity,
alignment: Alignment.topLeft,
child: DecoratedBox(
// Debug widget to show extent of child column
decoration: BoxDecoration(
border: Border.all(),
color: Colors.amber,
),
child: Center(
// This should allow the Column to be smaller than the SizedBox?
child: Column(
// This holds the widgets that make up the graph
mainAxisSize: MainAxisSize.min,
children: graphWidgets,
),
),
),
),
),
),
),
),
);
}
}
1条答案
按热度按时间esbemjvw1#
根据SayyidJ的回答,答案是使用ConstrainedBox而不是SizedBox。当Column是ConstrainedBox的子对象时,它可以收缩以适应内容。
下面是修改后的代码,您可以在DartPad中运行它,显示了它的工作情况。