Высота сетки в зависимости от размера экрана

Привет, друзья, у меня возникла проблема при настройке высоты карты представления на основе экрана, который я пробовал в нем, динамически настраивая экран с помощью приведенного ниже кода, пожалуйста, найдите экран. Мне нужны точные 10 полей под текстом, а не так много я пытался использовать динамический MediaQuery, если я не использую медиа-запрос, он выдает мне ошибку, например, дополнительное пространство под экраном, подобное этому, и я также не могу использовать поле размера, пожалуйста, помогите друзьям, когда я использую поэтапное представление сетки внизу есть место

@override
  Widget build(BuildContext context) {
    var size = MediaQuery.of(context).size;
    final double itemHeight = (size.height - kToolbarHeight - 24) / 2.3;
    final double itemWidth = size.width / 2;
    return livevideolist != null
        ? new GridView.builder(
            itemCount: livevideolist == null ? 0 : livevideolist.length,
            gridDelegate: new SliverGridDelegateWithFixedCrossAxisCount(
              childAspectRatio: (itemWidth / itemHeight),
                crossAxisCount: 2),
            itemBuilder: (BuildContext context, int index) {
              return new GestureDetector(
                onTap: () {
                  String youtubeid = livevideolist[index]['url'];
                  playYoutubeVideo(youtubeid);
                },
                child: new Card(
                  elevation: 4.0,
                  margin: EdgeInsets.only(left: 10.0, right: 10.0, top: 5.0),
                  child: new Column(
                    children: <Widget>[
                      new Container(
                        height: 150.0,
                        width: double.infinity,
                        decoration: new BoxDecoration(
                          image: new DecorationImage(
                            image:
                                new NetworkImage(livevideolist[index]['image']),
                            fit: BoxFit.fill,
                          ),
                        ),
                      ),
                      Expanded(
                        child: new Container(
                          child: new Text(livevideolist[index]['title']),
                          margin: EdgeInsets.only(left: 10.0, top: 10.0),
                        ),
                      ),
                    ],
                  ),
                ),
              );
            },
          )
        : new Center(
            child: new CircularProgressIndicator(),
          );
  }

Дополнительное космическое изображение

Использование просмотра сетки с разбивкой


flutter flutter-layout flutter-sliver
person ayub baba    schedule 09.10.2018    source источник

Ответы (1)


arrow_upward
1
arrow_downward

Вы можете использовать пакет для этого, проверьте этот замечательный пакет: https://pub.dartlang.org/packages/flutter_staggered_grid_view

И вот как вы можете использовать:

          Widget build(BuildContext context) {
            return livevideolist != null
                ? new StaggeredGridView.countBuilder(
                    crossAxisCount: 2,
                    itemCount: livevideolist == null ? 0 : livevideolist.length,
                    staggeredTileBuilder: (int index) => new StaggeredTile.fit(1),
                    itemBuilder: (BuildContext context, int index) {
                      return new GestureDetector(
                        onTap: () {},
                        child: new Card(
                          elevation: 4.0,
                          margin: EdgeInsets.only(left: 10.0, right: 10.0, top: 5.0),
                          child: new Column(
                            mainAxisSize: MainAxisSize.min,
                            children: <Widget>[
                              new Container(
                                height: 150.0,
                                width: double.infinity,
                                decoration: new BoxDecoration(
                                  image: new DecorationImage(
                                    image: new NetworkImage(
                                        "https://upload.wikimedia.org/wikipedia/en/thumb/d/d9/ImageFight_arcadeflyer.png/256px-ImageFight_arcadeflyer.png"),
                                    fit: BoxFit.cover,
                                  ),
                                ),
                              ),
                              new Padding(
                                child: new Text(
                                    "Use a very long text here to see how it expands"),
                                padding: EdgeInsets.only(left: 10.0, top: 10.0),
                              ),
                            ],
                          ),
                        ),
                      );
                    },
                  )
                : new Center(child: new CircularProgressIndicator());
          }

Просто замените атрибуты, которые вы используете.

Добавьте maxLines в свой текст в зависимости от того, что вы хотите:

Text("Your long text....",
        maxLines: 2 )

Используйте fit: BoxFit.cover вместо fit: BoxFit.fill для вашего изображения.

Итак, похоже, что ваш текст имеет разные размеры, вы можете установить высоту родительского контейнера:

new Container(
   height: 80.0, //you can change this value
                            child: new Text(
                                "Use a very long text here to see how it expands"),
                            padding: EdgeInsets.only(left: 10.0, top: 10.0),
                          ),
person diegoveloper    schedule 09.10.2018
comment
но мне нужно, чтобы высота сетки была одинаковой для всех заголовков, верно? - person ayub baba; 09.10.2018
comment
О, я думал, что вам нужна динамическая высота, зависящая от текста - person diegoveloper; 09.10.2018
comment
проверьте код, высота элемента будет соответствовать вашему текстовому описанию - person diegoveloper; 09.10.2018
comment
Хорошо, я попробую, как вы дали, дайте вам знать - person ayub baba; 09.10.2018
comment
Я пробовал ваш код, как вы сказали, но высота второго ребенка увеличивается в размере. - person ayub baba; 09.10.2018
comment
добавил скриншот, пожалуйста, проверьте его один раз, пожалуйста, проверьте второй заголовок - person ayub baba; 09.10.2018
comment
проверьте мой обновленный ответ, измените размер вашего изображения - person diegoveloper; 09.10.2018
comment
Подходит: только BoxFit.cover - person ayub baba; 09.10.2018