flutter中UI根据屏幕尺寸调整

Question

我是一名 Android 开发人员，我正在学习 flutter，但在这里我正在解决一个常见但重要的问题。 在我下面的代码中，最后一些行被隐藏。这里我将屏幕大小分为 10 部分，前 9 部分用于 gridView，最后一部分用于卡片。卡工作正常，但行不合适。我在这里给出了图片 我想使 UI 适合每个屏幕尺寸，而不需要任何 ui 更改。我尝试了很多事情但找不到任何解决方案。 预先感谢

  @override
Widget build(BuildContext context) {
  final screenWidth = MediaQuery.of(context).size.width;
  final screenHeight = MediaQuery.of(context).size.height;
  final double topPosition1 = screenHeight * 0.5;
  final double leftPosition1 = screenWidth * 0.61;
  final double topPosition2 = screenHeight * 0.56;
  final double leftPosition2 = screenWidth * 0.05;

  // Calculate the height of each part
  final double partHeight = screenHeight / 10;

  // Calculate the aspect ratio dynamically based on screen size
  final double aspectRatio = screenWidth / 10 / partHeight ;

  return Scaffold(
    appBar: AppBar(
      title: const Text('Snake and Ladder'),
    ),
    body: Center(
      child: Stack(
        children: [
          Column(
            children: [
              // First 9 parts
              Expanded(
                flex: 9,
                child: Container(
                  color: Colors.white,
                  child: GridView.builder(
                    padding: const EdgeInsets.all(5.0),
                    gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
                      crossAxisCount: 10,
                      mainAxisSpacing: 10.0,
                      crossAxisSpacing: 7,
                      childAspectRatio: aspectRatio,
                    ),
                    itemCount: totalCells,
                    physics: const NeverScrollableScrollPhysics(),
                    itemBuilder: (context, index) {
                      final cellNumber = totalCells - index;
                      int row = ((cellNumber - 1) ~/ 10);
                      int col = (cellNumber - 1) % 10;
                      int newCellNumber;
                      if (row % 2 == 0) {
                        newCellNumber = (row + 1) * 10 - col;
                      } else {
                        newCellNumber = (row + 1) * 10 - (9 - col);
                      }
                      return _buildCell(newCellNumber, newCellNumber == _playerLocation, newCellNumber == _playerLocation2);
                    },
                  ),
                ),
              ),
              // Last part
              Expanded(
                flex: 1,
                child: Container(
                  color: Colors.white,
                  child: GestureDetector(
                    onTap: () {
                      setState(() {
                        if (!_firstTap) {
                          _diceNumber = 6;
                          _firstTap = true;
                        } else {
                          _diceNumber = Random().nextInt(6) + 1;
                        }
                        if (_buildCell1) {
                          _playerLocation += _diceNumber;
                          if (_playerLocation > totalCells) {
                            _playerLocation = totalCells;
                          }
                          if (snakes.containsKey(_playerLocation)) {
                            _playerLocation = snakes[_playerLocation]!;
                          }
                        } else {
                          _playerLocation2 += _diceNumber;
                          if (_playerLocation2 > totalCells) {
                            _playerLocation2 = totalCells;
                          }
                          if (snakes.containsKey(_playerLocation2)) {
                            _playerLocation2 = snakes[_playerLocation2]!;
                          }
                        }
                        _buildCell1 = !_buildCell1;
                      });
                    },
                    child: Card(
                      margin: const EdgeInsets.symmetric(vertical: 2.0, horizontal: 2.0),
                      color: _getPlayerColor(_buildCell1),
                      child: Padding(
                        padding: const EdgeInsets.all(10.0),
                        child: Image.asset(
                          'assets/images/dice-$_diceNumber.png',
                          width: 50,
                        ),
                      ),
                    ),
                  ),
                ),
              ),
            ],
          ),
         
        ],
      ),
    ),
  );
}

Answer 1

不要使用

MediaQuery

手动调整小部件的大小（如果您想知道原因，请参阅 this）。要使所有列和行项目适合任何设备屏幕，只需用

Expanded

包裹每个子项即可。

Column(
  children: [
    for (final i in List.generate(10, (index) => index))
      Expanded( // Wrap each column item with Expanded
        child: Row(
          children: [
            for (final j in List.generate(10, (index) => index))
              Expanded( // Wrap each row item with Expanded
                child: Card(...),
              )
          ],
        ),
      )
  ],
)