flutter 如何控制SizedBox中列的大小

o8x7eapl  于 2023-02-05  发布在  Flutter
关注(0)|答案(1)|浏览(146)

我正在构建一个小部件来在一个固定大小的窗口中显示图表/图形。图表将比窗口大,因此解决方案包括用户能够在窗口中滚动图形小部件(您可以在前面的问题中找到关于此的详细信息)。
布局的一部分包括一个使用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,
                    ),
                  ),
                ),
              ),
            ),
          ),
        ),
      ),
    );
  }
}
esbemjvw

esbemjvw1#

根据SayyidJ的回答,答案是使用ConstrainedBox而不是SizedBox。当Column是ConstrainedBox的子对象时,它可以收缩以适应内容。
下面是修改后的代码,您可以在DartPad中运行它,显示了它的工作情况。

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: ConstrainedBox(
            // This is the window the chart is displayed in
            constraints: BoxConstraints(
              maxHeight: 200,
              maxWidth: 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: Column(
                    // This holds the widgets that make up the graph
                    mainAxisSize: MainAxisSize.min,
                    children: graphWidgets,
                  ),
                ),
              ),
            ),
          ),
        ),
      ),
    );
  }
}

相关问题