颤动中可调整大小的拼贴视图

Question

我正在尝试制作一个能够由用户调整大小的拼贴应用程序。 并且当用户调整一个容器的大小时，相邻的容器应该相应地调整大小。 我已经为三个容器编写了一个代码来执行此操作，但是我必须跟踪所有三个 3 个容器的宽度和高度才能执行此操作。有没有更好的方法通过在颤振中使用约束来做到这一点？

下面是我的示例应用程序的屏幕，通过拖动白色图标来调整大小。

下面是我目前写的代码。

import 'package:flutter/material.dart';
    
    void main() {
      runApp(MaterialApp(
        home: Scaffold(
          body: HomeView(),
        ),
      ));
    }
    
    class HomeView extends StatefulWidget {
      @override
      _HomeViewState createState() => _HomeViewState();
    }
    
    class _HomeViewState extends State<HomeView> {
      double heightA = 200;
      double heightB =200;
      double widthA =200;
      double widthB =200;
      double widthC =400;
      double heightC =200;
    
      @override
      void initState() {
        // TODO: implement initState
        super.initState();
      }
    
      @override
      Widget build(BuildContext context) {
    
        return Scaffold(
            body: Center(
          child: Container(
            color: Colors.black12,
            child: Column(
              mainAxisAlignment: MainAxisAlignment.center,
              children: [
                Row(
                  mainAxisAlignment: MainAxisAlignment.center,
                  children: [
                    Stack(children: [
                      Container(
                        width: widthA,
                        height: heightA,
                        color: Colors.amber,
                        child: Center(
                            child: Text(
                          "Box 1",
                          style: TextStyle(fontSize: 30),
                        )),
                      ),
                      Positioned(
                        right: -5.0,
                        bottom: 0.0,
                        child: GestureDetector(
                          onPanUpdate: (info) {
                            print(info.delta.dx);
                            print(info.delta.dy);
                            setState(() {
                              widthA += info.delta.dx;
                              widthB -= info.delta.dx;
                            });
                          },
                          child: Align(
                            alignment: Alignment.topRight,
                            child: CircleAvatar(
                              radius: 14.0,
                              backgroundColor: Colors.black26,
                              child: Icon(Icons.swap_horizontal_circle,
                                  color: Colors.white),
                            ),
                          ),
                        ),
                      ),
                    ]),
                    Stack(children: [
                      Container(
                        width: widthB,
                        height: heightB,
                        color: Colors.red,
                        child: Center(
                            child: Text(
                          "Box 2",
                          style: TextStyle(fontSize: 30),
                        )),
                      ),
                      Positioned(
                        left: 0.0,
                        top: 0.0,
                        child: GestureDetector(
                          onPanUpdate: (info) {
                            print(info.delta.dx);
                            print(info.delta.dy);
                            setState(() {
                              widthB -= info.delta.dx;
                              widthA += info.delta.dx;
                            });
                          },
                          child: Align(
                            alignment: Alignment.topRight,
                            child: CircleAvatar(
                              radius: 14.0,
                              backgroundColor: Colors.black26,
                              child: Icon(Icons.swap_horizontal_circle,
                                  color: Colors.white),
                            ),
                          ),
                        ),
                      ),
                    ])
                  ],
                ),Stack(children: [
                  Container(
                    width: widthC,
                    height: heightC,
                    color: Colors.green,
                    child: Center(
                        child: Text(
                          "Box 3",
                          style: TextStyle(fontSize: 30),
                        )),
                  ),
                  Positioned(
                    left: 0.0,
                    top: 0.0,
                    child: GestureDetector(
                      onPanUpdate: (info) {
                        print(info.delta.dx);
                        print(info.delta.dy);
                        setState(() {
                          heightA -= -info.delta.dy;
                          heightB -= -info.delta.dy;
                          heightC += -info.delta.dy;
                        });
                      },
                      child: Align(
                        alignment: Alignment.topRight,
                        child: CircleAvatar(
                          radius: 14.0,
                          backgroundColor: Colors.black26,
                          child: Icon(Icons.swap_vert_circle,
                              color: Colors.white),
                        ),
                      ),
                    ),
                  ),
                ])
              ],
            ),
    
          ),
        ));
      }
    }

Answer 1

老实说......我不确定我的答案......但请尝试这种方式。 请使用 Expanded 并仅管理一个容器的大小（例如黄色的）

Container(
  width: collage_width,
  height: collage_height,
  child:column(
    children: [
      row(
       children: [
         //yellowContiner only Manage My size
         Expnaded( //RED Container )
      ]),
     Expnaded(//Green Container)
    ],
  ),
),