仅在可变高度容器内使用正方形的颤振布局

Posted 2023-02-23

【中文标题】仅在可变高度容器内使用正方形的颤振布局

【英文标题】：Flutter Layout with Squares Only inside Variable-Height Containers

【发布时间】：2020-06-10 01:29:37

【问题描述】：

我想尝试创建一个高度可变的布局，但会占据整个屏幕的宽度。我想要左边的 2 个大正方形，左边的每个大正方形需要 2 个小正方形在正方形的右边。详情见紫色图片。

但是，在我保证内部小部件和组件将是正方形的情况下，我似乎无法做到这一点。有没有办法做到这一点？

如果可能的话，我是否也可以实现拖动和重新排列的能力（在我来回旋转方块时也可以缩放）？我正在尝试实现这种类型的布局以及从 6 张图片中的每一张进行旋转的能力，并且它将在该方面根据需要正确缩放（或拖放以重新排列每张图片的能力）。

我们将不胜感激！我在下面展示了我所做的，但在可变高度容器内甚至有方形项目似乎都不起作用。

return Container(
  child: AspectRatio(
    aspectRatio: 1.0,
    child: Row(
      mainAxisAlignment: MainAxisAlignment.start,
      crossAxisAlignment: CrossAxisAlignment.start,
      children: <Widget>[
        Expanded(
            flex: 7,
            child: Column(
              children: <Widget>[
                Expanded(
                  flex: 1,
                  child: Container(
                    color: Colors.grey,
                  ),
                ),
                Expanded(
                  flex: 1,
                  child: Container(
                    color: Colors.green,
                  ),
                ),
              ],
            )),
        Expanded(
          flex: 3,
          child: Column(
            mainAxisAlignment: MainAxisAlignment.start,
            crossAxisAlignment: CrossAxisAlignment.start,
            children: <Widget>[
              Expanded(
                flex: 3,
                child: Container(
                  color: Colors.orange,
                ),
              ),
              Expanded(
                flex: 3,
                child: Container(
                  color: Colors.red,
                ),
              ),
              Expanded(
                flex: 3,
                child: Container(
                  color: Colors.orange,
                ),
              ),
              Expanded(
                flex: 3,
                child: Container(
                  color: Colors.red,
                ),
              )
            ],
          ),
        )
      ],
    ),
  ),
);

【参考方案1】：

请尝试此代码。你应该从这里开始。它是响应式的，你只需要在屏幕太小时更多地调整对齐方式

import 'package:flutter/material.dart';

void main() 
  runApp(MyApp());


class MyApp extends StatelessWidget 
  @override
  Widget build(BuildContext context) 
    return MaterialApp(
      theme: ThemeData.light(),
      debugShowCheckedModeBanner: false,
      home: Scaffold(
        body: Center(
          child: MyWidget(),
        ),
      ),
    );
  


class MyWidget extends StatelessWidget 
  @override
  Widget build(BuildContext context) 
    return FittedBox(
      child: Center(
        child: Container(
          height: MediaQuery.of(context).size.height,
          width: MediaQuery.of(context).size.width,
          padding: EdgeInsets.symmetric(vertical: 24.0, horizontal: 12.0),
          child: Column(
            children: <Widget>[
              Expanded(
                child: Row(
                  children: <Widget>[
                    Expanded(
                      flex: 7,
                      child: _buildSquare(Colors.purple),
                    ),
                    SizedBox(width: 12.0),
                    Expanded(
                      flex: 3,
                      child: Column(
                        mainAxisAlignment: MainAxisAlignment.center,
                        children: [
                          Expanded(
                            child: Align(
                              alignment: Alignment.bottomCenter,
                              child: _buildSquare(Colors.purple),
                            ),
                          ),
                          SizedBox(height: 12.0),
                          Expanded(
                            child: _buildSquare(Colors.purple),
                          ),
                        ],
                      ),
                    ),
                  ],
                ),
              ),
              SizedBox(height: 12.0),
              Expanded(
                child: Row(
                  children: <Widget>[
                    Expanded(
                      flex: 7,
                      child: _buildSquare(Colors.purple),
                    ),
                    SizedBox(width: 12.0),
                    Expanded(
                      flex: 3,
                      child: Column(
                        children: [
                          Expanded(
                            child: _buildSquare(Colors.purple),
                          ),
                          SizedBox(height: 12.0),
                          Expanded(
                            child: _buildSquare(Colors.purple),
                          ),
                        ],
                      ),
                    ),
                  ],
                ),
              ),
            ],
          ),
        ),
      ),
    );
  

  Widget _buildSquare(Color color) 
    return Center(
      child: AspectRatio(
        aspectRatio: 1.0,
        child: Container(
          decoration: BoxDecoration(
              color: color,
              border: Border.all(color: Colors.black, width: 3.0)),
        ),
      ),
    );
  

【讨论】：

我实际上尝试了上面的方法，但它似乎不适合我正在尝试做的事情，如下所示：1）左侧2个大方块2）每个大方块都伴随着右边 2 个相等的小方块。我尝试了上述方法，似乎无法在这种意义上正确布局，因为不可能使正方形遵循该模式。