当在开发者选项中更改 "最小宽度 "时，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,
                ),
              ],
            ),
          ),
        ),
      ),
    );
  }
}

就像我们在htmlcss中使用 "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，你可以用以下方法获得screen_sizes MediaQuery.of(context) 或使用类似 翩翩起舞_screenutil 根据一个样本来缩放你的用户界面，比如1080x1920的屏幕。