flutter - 在开发人员选项中更改 “smallest width”时，Flutter UI中断

Question

我是 flutter 编程的新手。我一直在使用特定的UI，如下所示。



如果我尝试在开发人员选项中更改“最小宽度”选项并将其设置为默认值以外的其他值，则整个UI都会中断，如图所示。





我必须补充一点，完全损坏的中间区域是堆栈小部件。

@override
  Widget build(BuildContext context) {
    return Consumer<SinglePlayerGameState>(
      builder: (context, gameState, child) => Expanded(
        flex: 48,
        child: Container(
          color: gameState.getGameColor(),
          child: Center(
            child: Stack(
              overflow: Overflow.visible,
              children: <Widget>[
                Positioned(
                  child: Transform.rotate(
                    angle: 45,
                    child: UNOcard(UNOcardData(CardTypes.BACK)),
                  ),
                  top: -30,
                  left: 90,
                ),
                Positioned(
                  child: Transform.rotate(
                    angle: 65,
                    child: UNOcard(UNOcardData(CardTypes.BACK)),
                  ),
                  top: 20,
                  left: 50,
                ),
                Positioned(
                  child: Transform.rotate(
                    angle: 180,
                    child: UNOcard(UNOcardData(CardTypes.BACK)),
                  ),
                  top: 100,
                  left: 65,
                ),
                Positioned(
                  child: Transform.rotate(
                    angle: 45,
                    child: UNOcard(UNOcardData(CardTypes.BACK)),
                  ),
                  top: 10,
                  right: 10,
                ),
                Positioned(
                  child: Transform.rotate(
                    angle: 65,
                    child: UNOcard(UNOcardData(CardTypes.BACK)),
                  ),
                  top: 120,
                  right: 50,
                ),
                Positioned(
                  child: Container(
                    decoration: BoxDecoration(
                        borderRadius: BorderRadius.circular(30),
                        color: Colors.black),
                    child: Text(
                      "${gameState.playingCards.length}",
                      style: TextStyle(
                          fontSize: 20,
                          fontFamily: 'Frijole',
                          color: Colors.white),
                    ),
                    padding: EdgeInsets.all(7),
                  ),
                  top: 10,
                  left: 10,
                ),
                Positioned(
                  child: SizedBox(
                    child: Center(
                        child: FlatButton(
                      onPressed: () {
                        gameState.nextTurn();
                      },
                      child: Icon(
                        FontAwesomeIcons.undoAlt,
                        size: 25,
                      ),
                      color: Colors.white,
                    )),
                    height: 35,
                    width: 60,
                  ),
                  bottom: 10,
                  left: 10,
                ),
                Positioned(
                  child: DragTarget<UNOcardData>(
                    onWillAccept: (UNOcardData data) {
                      var res = isValidMove(
                          data, gameState.onGoingCards.last, gameState);
                      if(res){
                        print(res);
                        return true;
                      }else{
                        vibrate();
                         return false;
                      }
                    },
                    onAccept: (UNOcardData data) {
                      print(data);
                      performAction(data, gameState);
                    },
                    builder: (context, candidateData, rejectedData) =>
                        Transform.rotate(
                      angle: 0,
                      child: gameState.onGoingCards.last,
                    ),
                  ),
                  top: 60,
                  right: 100,
                ),
              ],
            ),
          ),
        ),
      ),
    );
  }
}

就像我们在html / css中使用诸如“vmin，vmax，vh”之类的单位来生成响应文本和大小一样，在flutter中还有哪些选择？我们如何才能使响应式应用程序准确地 flutter 朔迷离？我不是在讨论缩放到其他屏幕尺寸，而是在稍微不同的分辨率和逻辑像素密度上进行缩放。

谢谢你的时间。

Answer 1

那是因为您正在使用边缘的边距

Positioned(
  child: Transform.rotate(
    angle: 180,
    child: UNOcard(UNOcardData(CardTypes.BACK)),
  ),
  top: 100,
  left: 65,
),

该顶部意味着它将自顶部定位100个单位。您真正想要的是从中心偏移一些百分比。您可以这样做:

Positioned.fill(
  child: Align(
    // (0, 0) is the center, (1, 1) is right bottom, (-1, -1) is left top and so on
    alignment: Alignment(0.25, 0.25), 
    child: YOUR_WIDGET
  )
);

为了获得更好的响应式UI，您可以使用 MediaQuery.of(context)获取screen_sizes或使用 flutter_screenutil之类的包根据示例(例如1080x1920屏幕)缩放UI。