如何相对于彼此调整Flutter Widget的大小？

fruv7luv 于 2022-11-25 发布在 Flutter

关注(0)|答案(2)|浏览(174)

我学习Flutter已经有几天了，我一直遇到这样的情况，我想缩放一组小部件（也就是Row、Column、Stack等），类似于Flexible()的功能。而不仅仅是最大的元素。考虑这个Column()（绿色）的例子，它有两个子元素：一个红色子对象与其父对象的宽度匹配，一个蓝色子对象与父对象的宽度的一半匹配：

在上面的例子中，如果绿色的Column()被限制为更小的宽度，则最终结果将如下所示：

然而，我想要的是每个子元素（red/blue）相对于彼此缩放它们的宽度/高度，如下所示：

我如何才能做到这一点？
在上面介绍的Column()的具体例子中，我的解决方法是添加一个包含蓝色小部件的Row()和一个Padding()，两者都具有相同的flex属性，这样当Column()收缩时，蓝色元素就可以正确缩放。如果我有许多不同宽度/对齐的元素，就不太可行了。为左/右对齐的元素添加一个Padding()，为居中的元素添加两个Padding()，这将是一场噩梦。有更好的方法吗？
我还想知道使用Stack()的类似解决方案。使用Positional()元素似乎设置了Stack()裁剪任何溢出的宽度/高度。如果有一个Stack()，它可以缩放所有的子元素，就像它是一个单一的图像一样，类似于我上面的Column()示例。

flutter

来源：https://stackoverflow.com/questions/74529319/how-can-flutter-widgets-be-sized-relatively-to-each-other

2条答案

按热度按时间

dwthyt8l1#

import 'package:flutter/material.dart';

void main() => runApp(const MyApp());

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  static const String _title = 'Flutter Code Sample';

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: _title,
      home: Scaffold(
        appBar: AppBar(title: const Text(_title)),
        body: const MyStatelessWidget(),
      ),
    );
  }
}

class MyStatelessWidget extends StatelessWidget {
  const MyStatelessWidget({super.key});

  @override
  Widget build(BuildContext context) {
    return SizedBox.expand(
      child: FractionallySizedBox(
        widthFactor: 0.5,
        heightFactor: 0.5,
        alignment: FractionalOffset.center,
        child: DecoratedBox(
          decoration: BoxDecoration(
            border: Border.all(
              color: Colors.blue,
              width: 4,
            ),
          ),
        ),
      ),
    );
  }
}

FractionallySizedBox小部件是一个小部件，它将其子部件的大小调整为总可用空间的一小部分。

赞(0）回复(0）举报 2022-11-25

pgky5nke2#

您可以查看FractionallySizedBox类，您可以指定widthFactor和heightFactor（例如0.5），以便它始终是父容器大小的一半。
示例：

Flexible(
            child: FractionallySizedBox(
              widthFactor: 0.5,
              heightFactor: 0.5,
              alignment: FractionalOffset.centerLeft,
              child: Container(
                  color: Colors.blue),
            ),
          ),

赞(0）回复(0）举报 2022-11-25

我来回答

如何相对于彼此调整Flutter Widget的大小？

2条答案

相关问题

热门标签

最新问答