Как обработать размер виджета флаттера, совместимого со всеми устройствами? - PullRequest
Новая
       7

Как обработать размер виджета флаттера, совместимого со всеми устройствами?

1 голос
/ 26 марта 2020

Здесь я беру два виджета, один - виджет текстового поля, а другой - значок виджета, оба помещены в отдельный контейнер. Я очень новичок, чтобы трепетать, я не знаю, как разместить два виджета параллельно друг другу с разным размером. Но как-то разработано для моего мобильного, но когда я запускаю свое приложение на другом мобильном телефоне, его виджеты переполняются. Может ли кто-нибудь помочь мне в этой проблеме. Заранее спасибо!!! Для получения дополнительной информации см. Изображение.

enter image description here

Вот мой код 

Padding(
                padding: const EdgeInsets.only(
                    top: 10.0, bottom: 4.0, right: 20.0, left: 20.0),
                child: Row(
                  mainAxisAlignment: MainAxisAlignment.spaceAround,
                  children: <Widget>[
                    Container(
                      child: Material(
                        color: Colors.white,
                        elevation: 3.0,
                        // CONTAINER BACKSIDE SHADOW DEPTH
                        borderRadius: BorderRadius.circular(5.0),
                        shadowColor: Color(0xFF90A4AE),
                        //CONTAINER BACKSIDE SHADOW COLOR
                        child: Expanded(
                          child: TextField(
                            decoration: InputDecoration(
                              border: InputBorder.none,
                              prefixIcon: IconButton(
                                icon: Icon(
                                  Icons.search,
                                  color: Colors.pink,
                                ),
                                onPressed: () {},
                              ),

                              hintText: "Search for restaurant",
                              hintStyle: TextStyle(fontSize: 15),
                            ),
                            onChanged: (input) {
                              print(input);
                            },
                          ),
                        ),
                      ),
                      height: 55.0,
                      width: MediaQuery
                          .of(context)
                          .size
                          .width - 120,
                      decoration: BoxDecoration(
                        border: Border.all(
                            color: Colors.white,
                            width: 1.0,
                            style: BorderStyle.solid),
                        borderRadius: BorderRadius.circular(5.0),
                      ),
                    ),
                    Container(
                      child: Material(
                        color: Colors.white,
                        elevation: 3.0,
                        // CONTAINER BACKSIDE SHADOW DEPTH
                        borderRadius: BorderRadius.circular(5.0),
                        shadowColor: Color(
                            0xFF90A4AE),
                        child: IconButton(
                          icon: Icon(Icons.tune),
                          color: Colors.pink,
                          onPressed: () {
                           [enter image description here][1]
                          },
                        ), //CONTAINER BACKSIDE SHADOW COLOR
                      ),
                      height: 55.0,
                      width: MediaQuery
                          .of(context)
                          .size
                          .width - 300,
                      decoration: BoxDecoration(
                          border: Border.all(
                              color: Colors.white,
                              width: 1.0,
                              style: BorderStyle.solid),
                          borderRadius: BorderRadius.circular(5.0)),
                    )
                  ],
                ),
              ),

1 Ответ

0 голосов
/ 31 марта 2020

Из скриншота и кода видно, что в строке два виджета, а экран переполнен, поскольку не может вместить и показать оба из них.

Существует два решения:

  • Для автоматического отображения дочерних строк в следующей строке при переполнении.
  • Чтобы прокрутить дочерние строки по строкам.

ПРИМЕЧАНИЕ: SMLink is мой пользовательский виджет. Просто используется здесь для демонстрационных целей.

SOLUTION-1

Простой обходной путь - использовать виджет Wrap вместо виджета Row. Виджет Wrap просто берет детей, склонных к переполнению экрана, и помещает их в следующую строку. Вы можете установить direction, spacing et c в дополнение к параметрам, которые может предложить виджет Row. Попробуйте и дайте мне знать. 

// By default, it behaves as Row, you can set the direction attribute to Axi.vertical to mimic the Column widget.
Wrap(
      spacing: 8.0,
      runAlignment: WrapAlignment.center,
      crossAxisAlignment: WrapCrossAlignment.center,
      alignment: WrapAlignment.center,
      children:
            [
              SMLink(logo: 'Medium', link: Constants.LINK_MEDIUM),
              SMLink(logo: 'linkedin', link: Constants.LINK_LINKEDIN),
              SMLink(logo: 'facebook', link: Constants.LINK_FAEBOOK),
              SMLink(logo: 'Qwiklabs', link: Constants.LINK_QWIKLABS),
            ],
    )

SOLUTION-2

На снимке экрана другой способ исправить это сделать прокрутку строки. Это делает интерфейс в вашем случае непротиворечивым. Для этого мы можем использовать ListView виджет. 

ListView(
    scrollDirection: Axis.horizontal,
    children:
        [
              SMLink(logo: 'Medium', link: Constants.LINK_MEDIUM),
              SMLink(logo: 'linkedin', link: Constants.LINK_LINKEDIN),
              SMLink(logo: 'facebook', link: Constants.LINK_FAEBOOK),
              SMLink(logo: 'Qwiklabs', link: Constants.LINK_QWIKLABS),
        ],
)
...