Question

“我的主页”屏幕对不同尺寸的屏幕无响应。它与其他小部件重叠。

我使用了MediaQuery。

如何解决此问题？

IOS设备

Android设备

代码：


Size get size => Size(MediaQuery.of(context).size.width * 0.8,
      MediaQuery.of(context).size.width * 0.8);

  double _rotote(int index) => (index / widget.items.length) * 2 * pi;

构建方法：

Center(
      child: Container(
            // alignment: Alignment.center,
              height:  size.height/1.1,
              width:  size.width/1.1,
              decoration: BoxDecoration(
                  shape: BoxShape.circle,
                  boxShadow: [BoxShadow(blurRadius: 20, color: Colors.black38)],
                  //border: Border.all(color: Colors.black)
                  ),
                  child:  Transform.rotate(
            angle: -(widget.current + widget.angle) * 2 * pi,
            child: Stack(
              alignment: Alignment.center,
              children: <Widget>[
                for (var luck in widget.items) ...[_buildCard(luck)],
                for (var luck in widget.items) ...[_buildImage(luck)],
              ],
            ),
          ),
            ),
    );

车轮卡：


_buildCard(Luck luck) {
    var _rotate = _rotote(widget.items.indexOf(luck));
    var _angle = 2 * pi / widget.items.length;
    return Transform.rotate(
      angle: _rotate,
      child: ClipPath(
        clipper: _LuckPath(_angle),
        child: Container(
          height:size.height/1.1,
          width: size.width/1.1,
          decoration: BoxDecoration(
           // border: Border.all(color: Colors.black),
              gradient: LinearGradient(
                  begin: Alignment.topCenter,
                  end: Alignment.bottomCenter,
                  colors: [luck.color, luck.color])),
        ),
      ),
    );
  }

车轮上的图像

_buildImage(Luck luck) {
    var _rotate = _rotote(widget.items.indexOf(luck));
    return Transform.rotate(
      angle: _rotate,
      child: Container(
        height: size.height,
        width: size.width,
        alignment: Alignment.topCenter,
        child: ConstrainedBox(
          constraints:
              BoxConstraints.expand(height: size.height / 3, width: 44),
          child: Image.asset(luck.asset),//Image.asset("asset/image/wheel.png")
        ),
      ),
    );
  }
}

以上这些方法是在StatefulWidget类BoardView.dart

中定义的

HomePage.dart

 Center(
                child: Column(
                      children: <Widget>[
                        ArrowView(),// for upper arrow
                        Stack(
                          alignment: Alignment.center,
                            children: <Widget>[

                              BoardView(items: _items, current: _current, angle: _angle),
                              _buildSpin(),


                            ],
                          ),
                          _buildResult(_value),
                        ], 
                      ),
                    );

_buildSpin

_buildSpin() {


    return Material(
      color: Colors.white,
      shape: CircleBorder(),
      child: InkWell(
        customBorder: CircleBorder(),

        child: Container(
          alignment: Alignment.center,
          decoration: BoxDecoration(
            border: Border.all(color: Colors.white),
            color: Colors.blue,
            borderRadius: BorderRadius.circular(80)
          ),
          height: 70,
          width: 70,
          child: Text(
            "SPIN",
            style: TextStyle(fontSize: 22.0, fontWeight: FontWeight.bold, color: Colors.white),
          ),
        ),
        onTap: (){},
        ),
    );

  }

Answer 1

我想您可以看看这个package。我已经在我的一个项目中使用了它，当处理从移动设备到平板电脑的不同屏幕时，它确实使生活变得轻松。

Answer 2

您可以将FractionallySizedBox与widthFactor或heightFactor一起使用，请参阅：https://www.youtube.com/watch?v=PEsY654EGZ0

对于方向，您可以用OrientationBuilder包装小部件：https://flutter.dev/docs/cookbook/design/orientation

拍动响应式屏幕

2 个答案: