这是一个具体的例子,需要从另一篇文章中得到案例2和案例3。
How to use the constraints and sizes of other widgets during the build phase
基本继承权--
主[柔性]
儿童1:红色(扩展)
子2:紫色(非扩展,但它服从最小约束)[flex]
------子项1:绿色(非扩展,按预期工作)
------儿童2:黄色(我希望它能填满紫色的剩余空间,但系统不允许我只使用扩展的空间)
目标--
我要黄色的盒子填满紫色盒子里剩余的空间。
注意:小部件的特殊组合不允许我将黄色容器包装在扩展的小部件中。
---------------------我不能使用扩展的原因--
如果我将黄色小部件包装在一个展开的小部件中,它将抛出一个错误…这就是为什么…
在这种情况下,我有两个集装箱在一个集装箱内。
第一个孩子(主要):红色的那个正在膨胀,所以…
子元素2(主元素):紫色元素试图收缩包装其子元素并尽可能少地占用空间,但从技术上讲,它没有最大约束(只有最小约束,这就是为什么仍然有一些紫色可见的原因)。
紫色的孩子也是一个弹性体,有两个孩子,因为紫色弹性体试图收缩包装它的孩子,它会告诉它的孩子做同样的事。
(紫色的)孩子1:绿色的容器能做到这一点,而且很好,因为我希望它能做到这一点,但是……
子2(紫色):我希望黄色容器用其最小宽度参数填充紫色创建的空间。
问题是,黄色容器紫色父级告诉它收缩包装它的子级(如上所述),但是如果我将它包装在一个扩展的小部件中,您将告诉黄色容器扩展,或者换句话说,不要收缩包装它的子级…黄色容器既可以收缩包装,也可以不收缩包装其子容器。
所以你会得到一个错误
所以…
我需要知道紫色容器的计算宽度
然后计算出绿色容器的宽度
那么我的黄色容器的宽度是
黄色。宽度=紫色。宽度-绿色。宽度
代码输出--
this shows the output of the code below
flutter - 如何让黄色容器扩展并填充其紫色 parent 可用的其余空间-LMLPHP
——————————————————————————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,
          ),
        );
      }
    }

——————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————-
    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,
                    ),
                  ),
                ],
              ),
            ),
          ),
        ],
      ),
    );
  }
}

最佳答案

您需要将内部的Row包装成一个IntrinsicWidth来强制执行它,以根据内容尽可能少地占用空间。
多亏了这一点,您现在可以将该行的子级包装到Expanded中,而无需进行异常处理。
flutter - 如何让黄色容器扩展并填充其紫色 parent 可用的其余空间-LMLPHP

 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)),
              ),
            ],
          ),
        ),
      ),
    ),
  ],
),

关于flutter - 如何让黄色容器扩展并填充其紫色 parent 可用的其余空间,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/50786772/

10-12 04:27