корректировка нижнего листа в флаттере - PullRequest
Новая
       40

корректировка нижнего листа в флаттере

0 голосов
/ 30 октября 2019

В моем приложении есть нижний лист, который отображается правильно для телефона с размером 5+, но когда я запускаю на телефонах с меньшим экраном, я получаю как ниже

enter image description here

проблема связана с заполнением, когда оно пересекает диапазон, есть ли альтернативный способ создания нижнего листа, а также размер его содержимого должен соответствовать конкретному устройству? как автоматически настроить размер шрифта, а также заполнение в зависимости от конкретного устройства.

ниже приведен код для того же 

showModalBottomSheet<void>(
        shape: RoundedRectangleBorder(
          borderRadius: BorderRadius.circular(10.0),
        ),
        context: context,
        isScrollControlled: true,
        builder: (BuildContext context) {
          return FractionallySizedBox(
              heightFactor: 0.2,
              child: Padding(
                  padding: const EdgeInsets.symmetric(
                    horizontal: 22.0,
                    vertical: 14.0,
                  ),
                  child: Column(
                    children: <Widget>[
                      ListTile(
                          leading: Icon(Icons.remove_red_eye),
                          title: Text(
                            "View",
                            overflow: TextOverflow.ellipsis,
                            textAlign: TextAlign.justify,
                            maxLines: 1,
                            style: TextStyle(
                              fontSize:
                                  ScreenUtil(allowFontScaling: true).setSp(50),
                            ),
                          ),
                          onTap: () {
                            Navigator.of(context).pop();
                            setGenerateReportView(context, count, data);
                          }),
                      ListTile(
                          leading: Icon(Icons.file_download),
                          title: Text(
                            "Download",
                            overflow: TextOverflow.ellipsis,
                            textAlign: TextAlign.justify,
                            maxLines: 1,
                            style: TextStyle(
                              fontSize:
                                  ScreenUtil(allowFontScaling: true).setSp(50),
                            ),
                          ),
                          onTap: () => {
                                Toast.show("Downloading", context,
                                    duration: Toast.LENGTH_LONG,
                                    gravity: Toast.BOTTOM),
                                Navigator.of(context).pop()
                              }),
                    ],
                  )));
        });

Спасибо.

Ответы [ 2 ]

0 голосов
/ 30 октября 2019

Сначала используйте этот атрибут для своего столбца: 

Column(
  mainAxisSize: MainAxisSize.min,
  child: ...
)

Также попробуйте обернуть свой контент виджетом LayoutBuilder , чтобы иметь доступ к ограничениям BottomSheet ,так что вы можете установить размер виджетов в зависимости от имеющегося пространства.

Flutter LayoutBuilder

0 голосов
/ 30 октября 2019

A Column виджет по умолчанию расширяется до максимального вертикального пространства. Поэтому вместо использования Column используйте виджет Wrap, который настраивает его дочерние элементы в соответствии с местом на экране. Рабочий код ниже на эмуляторе с размерами экрана <5 и> 5 соответственно: 

child:
                  Wrap(
                    children: <Widget>[
                      ListTile(
                          leading: Icon(Icons.remove_red_eye),
                          title: Text(
                                      ....

Надеюсь, что это отвечает на ваш вопрос.

...