Flutter web - настройка высоты до 100%, а не 100vh - PullRequest
Новая
       19

Flutter web - настройка высоты до 100%, а не 100vh

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

В HTML создание страницы, которая разделена на 2 столбца, которые охватывают 100% высоты экрана просто 

<div id="row">

<div id="column1" style="width:75%; height:100%"></div>
<div id="column2" style="width:25%; height:100%"></div>

</div>

Использование Flutter кажется более сложным, чем должно быть,я попытался достичь вышеупомянутого несколькими способами: (набросок страницы CustomScrollView -> SliverToBoxAdapter -> Row -> Columns)

  • Использование MediaQuery для установки высоты столбцов как deviceSize.height. Это не удалось, потому что, поскольку левый столбец стал больше правого столбца, правый столбец не увеличился в размере, чтобы соответствовать.

  • Использование Expanded или Flexible (плотный или свободный)попытаться увеличить высоту. Это не сработало.

Мой вопрос: как мне достичь 100% высоты, а не 100vh высоты в сети флаттера?

Редактировать:

Это иллюстрирует проблему, правый столбец не увеличивается в размере, чтобы соответствовать левому столбцу. 

CustomScrollView(
    slivers: <Widget>[
      SliverFillRemaining(
        child: Container(
          color: Colors.purple,
          child: SingleChildScrollView(
            child: Row(
              children: <Widget>[
                Container(
                  color: Colors.blue,
                  child: Column(
                    children: <Widget>[
                      Text("test"),
                      SizedBox(height: 300),
                      Text("test"),
                      SizedBox(height: 300),
                      Text("test"),
                      SizedBox(height: 300),
                      Text("test"),
                      SizedBox(height: 300),
                    ],
                  ),
                ),
                Container(
                  color: Colors.yellow,
                  child: Column(
                    children: <Widget>[Text("test")],
                  ),
                ),
              ],
            ),
          ),
        ),
      ),
    ],
  );

1 Ответ

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

Не уверен, что это то, что вы хотите. Но, основываясь на вашем утверждении, я думаю, что вы ищете макет с двумя столбцами, как в здесь и как показано ниже на рисунке.

enter image description here

Ниже приведен код для того же. Вы можете настроить значение изгиба в виджете «Расширение», чтобы получить необходимое соотношение ширины экрана. но если вы хотите отрегулировать ширину каждого столбца, например, используя ручку перетаскивания, то этого будет недостаточно. 

import 'package:flutter/material.dart';

class FullHeightDemo extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Container(
        child: Row(
      children: <Widget>[
        Expanded(
          flex: 4,
          child: Container(
            color: Colors.red,
            child: Center(
              child: Text(
                'Column-1',
                style:
                    TextStyle(fontWeight: FontWeight.bold, color: Colors.black),
              ),
            ),
          ),
        ),
        Expanded(
          flex: 1,
          child: Container(
            child: Container(
              color: Colors.teal,
              child: Center(
                child: Text(
                  'Column-2',
                  style: TextStyle(
                      fontWeight: FontWeight.bold, color: Colors.black),
                ),
              ),
            ),
          ),
        )
      ],
    ));
  }
}

Указание высоты с помощью MediaQuery внутри виджета с прокруткой может помочь

Следующий код размещает столбцы внутри виджета SingleChildScrollableView и указывает высоту контейнера на основе MediaQuery для достижения того же самого. Поможет ли это? LayoutBuilder только для того, чтобы показать, что использование высоты из его ограничений также может привести к ошибке, поскольку в этом случае его высота также равна infinite. 

import 'package:flutter/material.dart';

class FullHeightDemo extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return SingleChildScrollView(
      child: LayoutBuilder(
        builder: (context, constraints) {
          var size = MediaQuery.of(context).size;
          return Container(
            child: Row(
              children: <Widget>[
                Container(
                  height: size.height,
                  // height: constraints.maxHeight,
                  width: constraints.maxWidth / 2,
                  color: Colors.red,
                  child: Center(
                    child: Text(
                      'Column 1',
                      style: TextStyle(
                        fontWeight: FontWeight.bold,
                        color: Colors.black,
                      ),
                    ),
                  ),
                ),
                Container(
                  color: Colors.green,
                  height: size.height,
                  // height: constraints.maxHeight,
                  width: constraints.maxWidth / 2,
                  child: Center(
                    child: Text(
                      'Column 2',
                      style: TextStyle(
                          fontWeight: FontWeight.bold, color: Colors.black),
                    ),
                  ),
                )
              ],
            ),
          );
        },
      ),
    );
  }
}
...