Ограничение флаттера не подходит для любого размера экрана, почему?

В моем коде флаттера я пытаюсь создать ограничение макета, которое может соответствовать нескольким размерам экрана, но на двух моих эмуляторах, один из которых равен 6, а другой - 10, макет либо слишком мал, либо слишком велик. Почему? макет содержит один столбец и четыре строки. приведенный ниже код показывает только первую строку. Я бы хотел, чтобы квадраты в первом ряду автоматически заполняли пространство из стороны в сторону. три нижних строки жестко закодированы, поэтому не обращайте на них внимания. сосредоточился с вашим ответом только на первой строке.

вот код:

import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:flutter/widgets.dart';

void main() {
  runApp(
    MaterialApp(
      home: Scaffold(
          backgroundColor: Colors.deepOrangeAccent[100],
          appBar: AppBar(
            title: Center(child: Text('Kakuro SideKick III')),
            backgroundColor: Colors.blueGrey[900],
          ),
          body: Column(mainAxisAlignment: MainAxisAlignment.end,
              //crossAxisAlignment: CrossAxisAlignment.center,
              children: <Widget>[
                Row(
                  mainAxisAlignment: MainAxisAlignment.center,
                  children: [
                    GestureDetector(
                      onTap: () {
                        print('Just clicked on 1');
                      },
                      child: ConstrainedBox(
                          constraints: BoxConstraints(
                            minWidth: 40.0,
                            minHeight: 40.0,
                            maxWidth: 150.0,
                            maxHeight: 150.0,
                          ),
                          child: Container(
                              color: Colors.cyan,
                              width: double.infinity,
                              height: double.infinity,
                              padding: EdgeInsets.all(40.0),
                              margin: EdgeInsets.all(5.0),
                              child: Text('1'))),
                    ),
                    GestureDetector(
                      onTap: () {
                        print('Just clicked on 2');
                      },
                      child: ConstrainedBox(
                        constraints: BoxConstraints(
                          minWidth: 40.0,
                          minHeight: 40.0,
                          maxWidth: 150.0,
                          maxHeight: 150.0,
                        ),
                        child: Container(
                            color: Colors.cyan,
                            width: double.infinity,
                            height: double.infinity,
                            padding: EdgeInsets.all(40.0),
                            margin: EdgeInsets.all(5.0),
                            child: Text('2')),
                      ),
                    ),
                    GestureDetector(
                      onTap: () {
                        print('Just clicked on 3');
                      },
                      child: ConstrainedBox(
                        constraints: BoxConstraints(
                          minWidth: 40.0,
                          minHeight: 40.0,
                          maxWidth: 150.0,
                          maxHeight: 150.0,
                        ),
                        child: Container(
                            color: Colors.cyan,
                            width: double.infinity,
                            height: double.infinity,
                            padding: EdgeInsets.all(40.0),
                            margin: EdgeInsets.all(5.0),
                            child: Text('3')),
                      ),
                    ),
                    GestureDetector(
                      onTap: () {
                        print('Just clicked on 4');
                      },
                      child: ConstrainedBox(
                        constraints: BoxConstraints(
                          minWidth: 40.0,
                          minHeight: 40.0,
                          maxWidth: 150.0,
                          maxHeight: 150.0,
                        ),
                        child: Container(
                            color: Colors.cyan,
                            width: double.infinity,
                            height: double.infinity,
                            padding: EdgeInsets.all(40.0),
                            margin: EdgeInsets.all(5.0),
                            child: Text('4')),
                      ),
                    ),
                  ],
                ),

6 макет

10 Макет

Steve Ben-Ari 18.01.2021 источник

Ответы (2)

arrow_upward
1
arrow_downward

Ответить на вопрос почему довольно просто: вы устанавливаете явные ограничения (т. е. минимальную и максимальную высоту/ширину), а виджеты не могут сжиматься/расширяться сверх этого значения, поэтому они (в большинстве в любом случае) либо переполняют экран, либо не заполняют его.

То, чего вы пытаетесь достичь, можно сделать с помощью Expanded. Если вы хотите сохранить соотношение сторон 1:1, используйте его в сочетании с Соотношение сторон.

Вот так:

Row(
              mainAxisAlignment: MainAxisAlignment.center,
              children: [
                Expanded(
                  child: GestureDetector(
                    onTap: () {
                      print('Just clicked on 1');
                    },
                    child: AspectRatio(
                        aspectRatio: 1,
                        child: Container(
                            color: Colors.cyan,
                            padding: EdgeInsets.all(40.0),
                            margin: EdgeInsets.all(5.0),
                            child: Text('1'))),
                  ),
                ),
                Expanded(
                  child: GestureDetector(
                    onTap: () {
                      print('Just clicked on 2');
                    },
                    child: AspectRatio(
                        aspectRatio: 1,
                        child: Container(
                            color: Colors.cyan,
                            padding: EdgeInsets.all(40.0),
                            margin: EdgeInsets.all(5.0),
                            child: Text('2'))),
                  ),
                ),
                Expanded(
                  child: GestureDetector(
                    onTap: () {
                      print('Just clicked on 3');
                    },
                    child: AspectRatio(
                        aspectRatio: 1,
                        child: Container(
                            color: Colors.cyan,
                            padding: EdgeInsets.all(40.0),
                            margin: EdgeInsets.all(5.0),
                            child: Text('3'))),
                  ),
                ),
                Expanded(
                  child: GestureDetector(
                    onTap: () {
                      print('Just clicked on 4');
                    },
                    child: AspectRatio(
                        aspectRatio: 1,
                        child: Container(
                            color: Colors.cyan,
                            padding: EdgeInsets.all(40.0),
                            margin: EdgeInsets.all(5.0),
                            child: Text('4'))),
                  ),
                ),
              ],
            )

Riwen 18.01.2021

arrow_upward
0
arrow_downward

Попробуйте использовать MediaQuery вместо числа, это выглядит так:

minWidth: MediaQuery.of(context).size.width

Существует два способа использования MediaQuery в этом случае:

MediaQuery.of(context).size.width (берет всю ширину экрана) MediaQuery.of(context).size.height (то же самое, но по высоте)

Вы можете сделать расчет с этим, например:

MediaQuery.of(context).size.width * 0,1 (10% от всей ширины)

MediaQuery.of(context).size.height* 0,05 (5% от всей высоты)

Попытайся.

Rodrigo Rivas 18.01.2021

comment

Или используйте LayoutBuilder, который учитывает большую коробку, в которую вы пытаетесь приземлиться, после того, как вы уже уменьшили размер устройства на верхнюю панель, нижнюю панель, безопасную область и т. д. - Randal Schwartz; 19.01.2021

Ограничение флаттера не подходит для любого размера экрана, почему?

Ответы (2)

Вопросы по теме