Как я могу получить желтый контейнер, чтобы расширить и заполнить остальное пространство, которое есть у его пурпурных родителей? - PullRequest
0 голосов
/ 10 июня 2018

Это конкретный пример, который требует случая 2 и случая 3 из этого другого поста Как использовать ограничения и размеры других виджетов на этапе сборки

------------------------- ОСНОВНАЯ НАУКА -------------------------

main [FLEX] дочерний 1: красный (расширенный) дочерний 2: фиолетовый (не расширенный, но подчиняется минимальному ограничению) [FLEX] ------ дочерний 1: зеленый (не расширенный, работает как положено)------ ребенок 2: желтый (я бы хотел, чтобы он заполнил оставшуюся часть пространства, которое есть у пурпура, но система не позволит мне просто использовать расширенный)

------------------------- ЦЕЛЬ -------------------------

Iхочу, чтобы желтая рамка заполняла оставшееся пространство внутри пурпурной рамки.

ПРИМЕЧАНИЕ: очень специфическая комбинация виджетов, которая не позволяет мне обернуть желтый контейнер в расширенный виджет

------------------------- ПОЧЕМУ Я НЕ МОГУ ИСПОЛЬЗОВАТЬ ИСПОЛЬЗУЕТСЯ -------------------------

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

в этом конкретном случае у меня есть 2 контейнера внутри гибкого дочернего элемента 1 (основного): красный расширяется так ... дочерний элемент 2(основного): фиолетовый пытается сжать обертку и занять наименьшее количество места, насколько это возможно, но технически у него нет максимальных ограничений (только минимальные ограничения, поэтому видимый фиолетовый еще есть)

пурпурный ребенок также является флексом и имеет 2 детей, поскольку фиолетовый флекс пытается сжать обертку для своих детей, он скажет своим детям сделать то же самое дитя 1 (фиолетового цвета): зеленый контейнер делает это, и это нормально, потому что я хочусделать это, но ... дочерний элемент 2 (фиолетового цвета): я хочу, чтобы желтый контейнер заполнил пространство, созданное пурпурным с параметром минимальной ширины

, проблема в том, что родительский объект желтых контейнеров говорит эточтобы обернуть его дочерние элементы (как описано выше), но затем, если я оберну его в расширенном виджете, вы говорите, что желтый контейнер расширяется, или другими словами, nне сжимать свои дочерние элементы ... и желтый контейнер может одновременно сжимать и не сжимать дочерние элементы, так что вы получите ошибку

Итак ... Мне нужно знать рассчитанную ширину фиолетового контейнерарассчитанная ширина зеленого контейнера, а затем ширина моего желтого контейнера будет равна yellow.width = purple.width - green.width

------------------------- ВЫХОД КОДА -------------------------

это показывает выводкод ниже

this shows the current output vs the desired output

-------------------------MAIN.DART -------------------------

    import 'package:flutter/material.dart';
    import 'materialSheet.dart';

    void main() => runApp(new MyApp());

    class MyApp extends StatelessWidget {
      final appTitle = 'Material Sheets Demo';

      @override
      Widget build(BuildContext context) {
        return new MaterialApp(
          theme: ThemeData.dark(),
          home: new MaterialSheet(
            app: new Text("kill \n\n me plz"),
            sheet: new Icon(Icons.keyboard),
            attachment: new Icon(Icons.attachment),
            position: sheetPosition.right,
            placement: attachmentPlacement.inside,
            sheetMin: 125.0,
          ),
        );
      }
    }

------------------------- MATERIALSHEET.DART -------------------------

    import 'package:flutter/material.dart';

//-------------------------Enumerations-------------------------

enum sheetPosition { top, right, bottom, left }
enum sheetType { modal, persistent }
enum attachmentPlacement { inside, outside }

class MaterialSheet extends StatelessWidget {
  //-------------------------Parameters-------------------------

  final Widget app;
  final Widget sheet;
  final Widget attachment;

  final sheetPosition position;
  final sheetType type; //TODO add in the scrim behind the thing
  final attachmentPlacement placement;

  final double sheetMin; //TODO
  final double sheetMax; //TODO
  final double percentBeforeOpen; //TODO
  final bool autoOpenIndicator; //TODO
  final double percentBeforeClose; //TODO
  final bool autoCloseIndicator; //TODO

  final bool vertiScroll; //TODO
  final bool horiScroll; //TODO

  final bool swipeToOpen; //TODO
  final bool swipeToClose; //TODO

  MaterialSheet(
      {@required this.app,
      @required this.sheet,
      this.attachment,
      this.position: sheetPosition.bottom,
      this.type: sheetType.modal,
      this.placement: attachmentPlacement.inside,
      this.sheetMin,
      this.sheetMax,
      this.percentBeforeOpen: .5,
      this.autoOpenIndicator: true,
      this.percentBeforeClose: .5,
      this.autoCloseIndicator: true,
      this.vertiScroll: false,
      this.horiScroll: false,
      this.swipeToOpen: true,
      this.swipeToClose: true});

  //-------------------------Helper Code-------------------------k

  BoxConstraints _calcBoxConstraints(bool fullWidth) {
    if (sheetMin == null && sheetMax == null)
      return new BoxConstraints();
    else {
      if (sheetMin != null && sheetMax != null) {
        if (fullWidth) //we only care for height
          return new BoxConstraints(
            minHeight: sheetMin,
            maxHeight: sheetMax,
          );
        else //we only care for width
          return new BoxConstraints(minWidth: sheetMin, maxWidth: sheetMax);
      } else {
        if (sheetMin != null) {
          //we only have min
          if (fullWidth) //we only care for height
            return new BoxConstraints(minHeight: sheetMin);
          else //we only care for width
            return new BoxConstraints(minWidth: sheetMin);
        } else {
          //we only have max
          if (fullWidth) //we only care for h`eight
            return new BoxConstraints(maxHeight: sheetMax);
          else //we only care for width
            return new BoxConstraints(maxWidth: sheetMax);
        }
      }
    }
  }

  //-------------------------Actual Code-------------------------

  @override
  Widget build(BuildContext context) {

    bool isWidthMax =
        (position == sheetPosition.bottom || position == sheetPosition.top);

    //-----Create the Widgets and Initially calculate Sizes

    print("before test");
    Scaffold testScaff = theSheet(isWidthMax, context);
    print("after test");

    //-----Apply Size constraints as needed

    Align testAl = new Align();

    return new Stack(
      children: <Widget>[
        //---------------Contains your Application
        new Scaffold(
          backgroundColor: Colors.green,
          body: app,
        ),
        //---------------Contains the Sheet
        theSheet(isWidthMax, context),
      ],
    );
  }

  Scaffold theSheet(bool isWidthMax, BuildContext context) {

    Scaffold generatedScaffold = genScaff(isWidthMax);

    EdgeInsetsGeometry padCheck = (((generatedScaffold.body as Flex).children[0] as Flexible).child as Container).padding;

    print("value " + padCheck.toString());

    return generatedScaffold;
  }

  Scaffold genScaff(bool isWidthMax) {
    return new Scaffold(
      body: new Flex(
        direction: (isWidthMax) ? Axis.vertical : Axis.horizontal,
        //ONLY relevant if position is top or bottom
        textDirection: (position == sheetPosition.right)
            ? TextDirection.ltr
            : TextDirection.rtl,
        //ONLY relevant if position is left or right
        verticalDirection: (position == sheetPosition.top)
            ? VerticalDirection.up
            : VerticalDirection.down,
        crossAxisAlignment: CrossAxisAlignment.stretch,
        mainAxisSize: MainAxisSize.min,
        children: <Widget>[
          new Flexible(
              fit: FlexFit.loose,
              child: new Container(
                padding: EdgeInsets.all(18.3),
                color: Colors.red,
              )),
          new ConstrainedBox(
            constraints: _calcBoxConstraints(isWidthMax),
            child: new Container(
              color: Colors.purple,
              child: new Flex(
                direction: (isWidthMax) ? Axis.vertical : Axis.horizontal,
                //ONLY relevant if position is top or bottom
                textDirection: (position == sheetPosition.right)
                    ? (placement == attachmentPlacement.inside)
                    ? TextDirection.rtl
                    : TextDirection.ltr
                    : (placement == attachmentPlacement.inside)
                    ? TextDirection.ltr
                    : TextDirection.rtl,
                //ONLY relevant if position is left or right
                verticalDirection: (position == sheetPosition.top)
                    ? (placement == attachmentPlacement.inside)
                    ? VerticalDirection.down
                    : VerticalDirection.up
                    : (placement == attachmentPlacement.inside)
                    ? VerticalDirection.up
                    : VerticalDirection.down,
                crossAxisAlignment: CrossAxisAlignment.stretch,
                mainAxisAlignment: MainAxisAlignment.end,
                mainAxisSize: MainAxisSize.min,
                children: <Widget>[
                  new Container(
                    color: Colors.amberAccent,
                    child: sheet,
                  ),
                  new Flexible(
                    fit: FlexFit.loose,
                    child: new Container(
                      color: Colors.greenAccent,
                      child: (attachment != null) ? attachment : null,
                    ),
                  ),
                ],
              ),
            ),
          ),
        ],
      ),
    );
  }
}

Ответы [ 2 ]

0 голосов
/ 11 июня 2018

Вы должны сделать следующие изменения:

1.- Заменить ConstrainedBox () на SizedBox ()

2.- Заменить последний Flexible () на Expanded (),Гибко приспосабливается к размеру контейнера.Попробуйте, удалив дочерний контейнер.

3.- И, наконец, переключите зеленый контейнер () и желтый контейнер ().В противном случае зеленый расширяется.

Это рабочий код для лесов:

  Scaffold genScaff(bool isWidthMax) {
    return new Scaffold(
      body: new Flex(
        direction: (isWidthMax) ? Axis.vertical : Axis.horizontal,
        //ONLY relevant if position is top or bottom
        textDirection: (position == sheetPosition.right)
            ? TextDirection.ltr
            : TextDirection.rtl,
        //ONLY relevant if position is left or right
        verticalDirection: (position == sheetPosition.top)
            ? VerticalDirection.up
            : VerticalDirection.down,
        crossAxisAlignment: CrossAxisAlignment.stretch,
        mainAxisSize: MainAxisSize.min,
        children: <Widget>[
          new Flexible(
              fit: FlexFit.loose,
              child: new Container(
                padding: EdgeInsets.all(18.3),
                color: Colors.red,
              )),
          new SizedBox(
            width: 125.0, // Do your calculations based on isWidthMax
            height: double.infinity,
            //constraints: _calcBoxConstraints(isWidthMax),
            child: new Container(
              color: Colors.purple,
              child: new Flex(
                direction: (isWidthMax) ? Axis.vertical : Axis.horizontal,
                //ONLY relevant if position is top or bottom
                textDirection: (position == sheetPosition.right)
                    ? (placement == attachmentPlacement.inside)
                    ? TextDirection.rtl
                    : TextDirection.ltr
                    : (placement == attachmentPlacement.inside)
                    ? TextDirection.ltr
                    : TextDirection.rtl,
                //ONLY relevant if position is left or right
                verticalDirection: (position == sheetPosition.top)
                    ? (placement == attachmentPlacement.inside)
                    ? VerticalDirection.down
                    : VerticalDirection.up
                    : (placement == attachmentPlacement.inside)
                    ? VerticalDirection.up
                    : VerticalDirection.down,
                crossAxisAlignment: CrossAxisAlignment.stretch,
                mainAxisAlignment: MainAxisAlignment.end,
                mainAxisSize: MainAxisSize.min,
                children: <Widget>[
                  new Expanded(
                    child: new Container(
                      color: Colors.amberAccent,
                      child: sheet,
                    ),
                  ),
                  new Container(
                    color: Colors.greenAccent,
                    child: (attachment != null) ? attachment : null,
                  ),
                ],
              ),
            ),
          ),
        ],
      ),
    );
  }

И это результат

enter image description here

0 голосов
/ 10 июня 2018

Вам нужно обернуть свой внутренний Row в IntrinsicWidth, чтобы заставить его занимать как можно меньше места на основе его содержимого.

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

enter image description here

 new Row(
  crossAxisAlignment: CrossAxisAlignment.stretch,
  children: <Widget>[
    new Expanded(
      child: new Container(
        color: Colors.red,
      ),
    ),
    new ConstrainedBox(
      constraints: new BoxConstraints(minWidth: 100.0),
      child: new Container(
        color: Colors.purple,
        child: new IntrinsicWidth(
          child: new Row(
            crossAxisAlignment: CrossAxisAlignment.stretch,
            children: <Widget>[
              new Container(
                color: Colors.cyan,
                child: new Icon(Icons.title),
              ),
              new Expanded(
                child: new Container(
                    color: Colors.yellow,
                    alignment: Alignment.center,
                    child: new Icon(Icons.theaters)),
              ),
            ],
          ),
        ),
      ),
    ),
  ],
),
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...