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

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


 class Volume
    {


        private int mic1;
        public int Mic1
        {
            get
            {
                return mic1;
            }
            set
            {
                mic1 = value;
            }
       
         
        }


    }

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

1 个答案: