如何让黄色容器扩展并填充其紫色父级可用的其余空间
Bry*_*cel 5 flutter flutter-layout
这是一个特定示例，需要其他帖子中的案例 2 和案例 3 如何在构建阶段使用其他小部件的约束和大小
-------------------------基本层次结构------------------------- ——
main [FLEX] child 1：红色（扩展） child 2：紫色（未扩展，但遵守其最小约束）[FLEX] ------child 1：green（未扩展，按预期工作）--- ---孩子 2：黄色（我希望它填充紫色可用的其余空间，但系统不会让我只使用扩展）
- - - - - - - - - - - - -目标 - - - - - - - - - - - - ——
我希望黄色框填充紫色框内的其余可用空间。
注意：非常具体的小部件组合不允许我将黄色容器包装在展开的小部件中
-------------------------为什么我不能使用扩展-------------------- -----
如果我将黄色小部件包装在扩展中，它会引发错误......这就是为什么......
在这种特殊情况下，我在 flex child 1(of main) 中有 2 个容器：红色的容器正在膨胀，所以... child 2(of main)：紫色的容器试图收缩包裹它的孩子并占用最少的空间尽可能，但技术上它没有最大约束（只有最小约束，这就是为什么仍然有一些紫色可见）
紫色的孩子也是一个 flex 并且有 2 个孩子，因为紫色的 flex 试图收缩包裹它的孩子，它会告诉它的孩子做同样的孩子 1（紫色）：绿色容器这样做并且很好，因为我想要它这样做但是......孩子2（紫色）：我希望黄色容器填充紫色用其最小宽度参数创建的空间
问题是黄色容器紫色父级告诉它收缩包装它的孩子（如上所述）但是如果我把它包装在一个扩展的小部件中，你是在告诉黄色容器扩展或者换句话说不收缩包装它的孩子.. . 并且黄色容器既可以收缩包装也可以不收缩包装其子项，因此您会收到错误
所以......我需要知道紫色容器的计算宽度然后绿色容器的计算宽度然后我的黄色容器的宽度将是yellow.width = Purple.width - green.width
-------------------------代码输出--------------- ——
-------------------------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,
),
),
],
),
),
),
],
),
);
}
}
你需要把你的内心包裹Row成一个IntrinsicWidth以强制它根据其内容占用尽可能少的空间。
多亏了这一点，您现在可以Expanded毫无例外地将那个内行的孩子包装成一个。
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)),
),
],
),
),
),
),
],
),
| 归档时间： |
|
| 查看次数： |
4400 次 |
| 最近记录： |