Size: a a a

Dart & Flutter по-русски

2020 December 05

GV

Gorohov Valeriy in Dart & Flutter по-русски
Gorohov Valeriy
Как можно сделать такую верстку?
Возможно решение очевидно и я его просто не вижу.
Основная сложность:
1) Нужно сжимать красный блок, так, что бы желтый, зеленый и синий бок всегда показывали весь контент,
2) Но если высоты экрана хватает, то красный блок растягиваем до максимальной высоты (в примере она равна его ширине), а оставшееся место заполняет зеленый блок.
P/S/ надеюсь понятно объяснил)
Уточнение, виджет занимает всю высоту экрана. Ни больше, ни меньше.
источник

SB

Serg Bell in Dart & Flutter по-русски
Gorohov Valeriy
Как можно сделать такую верстку?
Возможно решение очевидно и я его просто не вижу.
Основная сложность:
1) Нужно сжимать красный блок, так, что бы желтый, зеленый и синий бок всегда показывали весь контент,
2) Но если высоты экрана хватает, то красный блок растягиваем до максимальной высоты (в примере она равна его ширине), а оставшееся место заполняет зеленый блок.
P/S/ надеюсь понятно объяснил)
источник

SB

Serg Bell in Dart & Flutter по-русски
Gorohov Valeriy
Как можно сделать такую верстку?
Возможно решение очевидно и я его просто не вижу.
Основная сложность:
1) Нужно сжимать красный блок, так, что бы желтый, зеленый и синий бок всегда показывали весь контент,
2) Но если высоты экрана хватает, то красный блок растягиваем до максимальной высоты (в примере она равна его ширине), а оставшееся место заполняет зеленый блок.
P/S/ надеюсь понятно объяснил)
источник

GV

Gorohov Valeriy in Dart & Flutter по-русски
Я перепробовал разные варианты Flexible (всё что смог придумать). Но уткнулся в то, что они все пропорциональны. И это мешает назначить два блока (красный и зеленый) как Flexible, т.к. в таком случае они начинают зависеть друг от друга, и даже если контент зеленого блока маленький, он не даст красному блоку расшириться более чем на половину свободного места в Column
источник

SB

Serg Bell in Dart & Flutter по-русски
а, сча
источник

SB

Serg Bell in Dart & Flutter по-русски
Gorohov Valeriy
Я перепробовал разные варианты Flexible (всё что смог придумать). Но уткнулся в то, что они все пропорциональны. И это мешает назначить два блока (красный и зеленый) как Flexible, т.к. в таком случае они начинают зависеть друг от друга, и даже если контент зеленого блока маленький, он не даст красному блоку расшириться более чем на половину свободного места в Column
не, все равно не понял - код бы увидеть, там 10050 вариантов
источник

SB

Serg Bell in Dart & Flutter по-русски
к вечеру тяжело думается))
источник

SB

Serg Bell in Dart & Flutter по-русски
есть expanded, aspectratio, fractionedbox и пр.
источник

GV

Gorohov Valeriy in Dart & Flutter по-русски
Serg Bell
не, все равно не понял - код бы увидеть, там 10050 вариантов
Сейчас в дартпад накидаю)
источник

GV

Gorohov Valeriy in Dart & Flutter по-русски
Код:
источник

GV

Gorohov Valeriy in Dart & Flutter по-русски
Эффект, на втором скрине красный блок должен уменьшаться, но вместо этого уменьшается зеленый, хотя он своей минимальной высоты достиг.
источник

GV

Gorohov Valeriy in Dart & Flutter по-русски
источник

GV

Gorohov Valeriy in Dart & Flutter по-русски
Для дартпада:
import 'package:flutter/material.dart';

void main() {
 runApp(MyApp());
}

class MyApp extends StatelessWidget {
 @override
 Widget build(BuildContext context) {
   return MaterialApp(
     debugShowCheckedModeBanner: false,
     home: Builder(
       builder: (context) => Scaffold(
         body: Column(
           crossAxisAlignment: CrossAxisAlignment.stretch,
           children: [
             ConstrainedBox(
               constraints: BoxConstraints(
                 maxHeight: MediaQuery.of(context).size.width,
                 minHeight: MediaQuery.of(context).size.width / 2,
               ),
               child: Container(color: Colors.red.shade400),
             ),
             Container(color: Colors.yellow.shade400, height: 100),
             Expanded(
               child: Center(
                 child: Container(color: Colors.green.shade400, height: 100),
               ),
             ),
             Container(color: Colors.blue.shade400, height: 100),
           ],
         ),
       ),
     ),
   );
 }
}
источник

AU

Andrey Unger in Dart & Flutter по-русски
>>Но если высоты экрана хватает, то красный блок растягиваем до максимальной высоты (в примере она равна его ширине), а оставшееся место заполняет зеленый блок.

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

SB

Serg Bell in Dart & Flutter по-русски
Gorohov Valeriy
Как можно сделать такую верстку?
Возможно решение очевидно и я его просто не вижу.
Основная сложность:
1) Нужно сжимать красный блок, так, что бы желтый, зеленый и синий бок всегда показывали весь контент,
2) Но если высоты экрана хватает, то красный блок растягиваем до максимальной высоты (в примере она равна его ширине), а оставшееся место заполняет зеленый блок.
P/S/ надеюсь понятно объяснил)
это просто эксперименты?. т.к. в тз (на картинке) указано у зелёного и синего contentHeight, а контента-то и нет никакого, самому выдумывать?.
источник

GV

Gorohov Valeriy in Dart & Flutter по-русски
Andrey Unger
>>Но если высоты экрана хватает, то красный блок растягиваем до максимальной высоты (в примере она равна его ширине), а оставшееся место заполняет зеленый блок.

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

SB

Serg Bell in Dart & Flutter по-русски
Gorohov Valeriy
в примере максимальная высота красного блока равна его ширине.
это условие из ТЗ или само так придумалось?.
источник

GV

Gorohov Valeriy in Dart & Flutter по-русски
Serg Bell
это просто эксперименты?. т.к. в тз (на картинке) указано у зелёного и синего contentHeight, а контента-то и нет никакого, самому выдумывать?.
В коде для дартпад я высоту контента задал через height у container. Реальный код из проекта я естественно не приложу, т.к. там не только лайаут, но и дизайн с данными.
источник

SB

Serg Bell in Dart & Flutter по-русски
Gorohov Valeriy
В коде для дартпад я высоту контента задал через height у container. Реальный код из проекта я естественно не приложу, т.к. там не только лайаут, но и дизайн с данными.
ничего не понятно - я пас
источник

GV

Gorohov Valeriy in Dart & Flutter по-русски
Serg Bell
это условие из ТЗ или само так придумалось?.
Можно считать mock данными, они отличаются от реальных данных, но на основной верстке и постановке задачи это не сказывается.
источник