Container 中的固定高度在 Flutter 中不起作用
Fixed height in Container is not working in Flutter
容器高度设置为固定的 40,但是一旦我在 AppBar() 中使用该小部件,它就会占用所有可能的高度。这是我的自定义小部件的代码,它具有容器的固定高度,
class LPBorderButtonWithIcon extends StatelessWidget {
final GestureTapCallback onPressed;
final String text;
final String iconAsset;
final Color textColor;
LPBorderButtonWithIcon(
{@required this.onPressed,
@required this.text,
@required this.textColor,
@required this.iconAsset});
@override
Widget build(BuildContext context) {
return GestureDetector(
onTap: onPressed,
child: Container(
height: 40,
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(25),
border: Border.all(color: Color(0XFFd8dce1))),
child: Row(
children: [
WidthSizedBox(15),
Image.asset(
iconAsset,
height: 14,
width: 14,
),
WidthSizedBox(5),
Text(text,
style: TextStyle(
color: textColor,
fontSize: 12,
fontFamily: "GilroyMedium")),
WidthSizedBox(15),
],
),
));
}
}
我在此屏幕中使用 LPBorderButtonWithIcon()
,
class CreateRulesScreen extends StatefulWidget {
@override
_CreateRulesScreenState createState() => _CreateRulesScreenState();
}
class _CreateRulesScreenState extends State<CreateRulesScreen> {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
brightness: Brightness.light,
backgroundColor: Colors.white,
elevation: 1,
centerTitle: false,
titleSpacing: 0.0,
leading: BackButton(
color: LPColor.primary,
onPressed: () {
Navigator.of(context).pop();
},
),
title: Text(
"Create Rule",
style: LPStyle.titleStyle,
),
actions: [
Container(
margin: EdgeInsets.only(top: 12, bottom: 12, right: 16),
child: LPBorderButtonWithIcon(
onPressed: null,
text: "Create",
textColor: Color(0XFF508ff4),
iconAsset: "images/ic_publish.png",
),
)
],
),
);
}
}
及以下是自定义容器占据所有可能高度的结果。请告诉我如何为我的自定义小部件设置固定高度。
将您的 Container 放在 Align 中,Aling 将强制容器仅占据它需要的 space。
Align(
child: Container(
height: 20,
width: 30,
color: Colors.white,
),
)
parent 小部件占用整个 space 可用于绘制小部件,这里 Container
是 parent 小部件,它占用任何 space是可用的,因此要为 Container
提供高度,需要将其放置在任何分配 x,y 位置的小部件内 以使其绘制。
Container(
height: 40, // Its not going to apply height as it's parent widget
)
因此,要计算出上面的代码,您必须将 Container 与任何其他小部件(如居中、对齐等)对齐。
例如:
Scaffold(
body: Container(
height: 600,
color: Colors.red,
child: Container(
height: 200,
color: Colors.yellow,
),
),
);
上面的例子child容器不会在200高度绘制黄色,它会占用整个600高度space。
输出:
为了解决这个问题,我们已经为 child Container
分配了一些小部件,这样它将获得开始绘制 child 小部件的 x、y 位置。这里使用 Center
小部件。
例如:
Scaffold(
body: Container(
height: 600,
color: Colors.red,
child: Center(
child: Container(
height: 200,
color: Colors.yellow,
),
),
),
);
输出:
一些限制:
小部件只能在给定的限制范围内决定自己的大小
它的 parent。这意味着小部件通常不能有任何大小
想要。
小部件无法知道也无法决定自己在
屏幕,因为小部件的 parent 决定了屏幕的位置
小部件。
由于parent的大小和位置,反过来也取决于
它自己的 parent,无法精确定义大小和
任何小部件的位置而不考虑树作为
一个整体。
如果 child 想要与其 parent 和 parent 不同的尺寸
没有足够的信息来对齐它,那么 child 的大小
可能会被忽略。定义对齐方式时要具体。
参考link:https://flutter.dev/docs/development/ui/layout/constraints
容器高度设置为固定的 40,但是一旦我在 AppBar() 中使用该小部件,它就会占用所有可能的高度。这是我的自定义小部件的代码,它具有容器的固定高度,
class LPBorderButtonWithIcon extends StatelessWidget {
final GestureTapCallback onPressed;
final String text;
final String iconAsset;
final Color textColor;
LPBorderButtonWithIcon(
{@required this.onPressed,
@required this.text,
@required this.textColor,
@required this.iconAsset});
@override
Widget build(BuildContext context) {
return GestureDetector(
onTap: onPressed,
child: Container(
height: 40,
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(25),
border: Border.all(color: Color(0XFFd8dce1))),
child: Row(
children: [
WidthSizedBox(15),
Image.asset(
iconAsset,
height: 14,
width: 14,
),
WidthSizedBox(5),
Text(text,
style: TextStyle(
color: textColor,
fontSize: 12,
fontFamily: "GilroyMedium")),
WidthSizedBox(15),
],
),
));
}
}
我在此屏幕中使用 LPBorderButtonWithIcon()
,
class CreateRulesScreen extends StatefulWidget {
@override
_CreateRulesScreenState createState() => _CreateRulesScreenState();
}
class _CreateRulesScreenState extends State<CreateRulesScreen> {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
brightness: Brightness.light,
backgroundColor: Colors.white,
elevation: 1,
centerTitle: false,
titleSpacing: 0.0,
leading: BackButton(
color: LPColor.primary,
onPressed: () {
Navigator.of(context).pop();
},
),
title: Text(
"Create Rule",
style: LPStyle.titleStyle,
),
actions: [
Container(
margin: EdgeInsets.only(top: 12, bottom: 12, right: 16),
child: LPBorderButtonWithIcon(
onPressed: null,
text: "Create",
textColor: Color(0XFF508ff4),
iconAsset: "images/ic_publish.png",
),
)
],
),
);
}
}
及以下是自定义容器占据所有可能高度的结果。请告诉我如何为我的自定义小部件设置固定高度。
将您的 Container 放在 Align 中,Aling 将强制容器仅占据它需要的 space。
Align(
child: Container(
height: 20,
width: 30,
color: Colors.white,
),
)
parent 小部件占用整个 space 可用于绘制小部件,这里 Container
是 parent 小部件,它占用任何 space是可用的,因此要为 Container
提供高度,需要将其放置在任何分配 x,y 位置的小部件内 以使其绘制。
Container(
height: 40, // Its not going to apply height as it's parent widget
)
因此,要计算出上面的代码,您必须将 Container 与任何其他小部件(如居中、对齐等)对齐。
例如:
Scaffold(
body: Container(
height: 600,
color: Colors.red,
child: Container(
height: 200,
color: Colors.yellow,
),
),
);
上面的例子child容器不会在200高度绘制黄色,它会占用整个600高度space。
输出:
为了解决这个问题,我们已经为 child Container
分配了一些小部件,这样它将获得开始绘制 child 小部件的 x、y 位置。这里使用 Center
小部件。
例如:
Scaffold(
body: Container(
height: 600,
color: Colors.red,
child: Center(
child: Container(
height: 200,
color: Colors.yellow,
),
),
),
);
输出:
一些限制:
小部件只能在给定的限制范围内决定自己的大小 它的 parent。这意味着小部件通常不能有任何大小 想要。
小部件无法知道也无法决定自己在 屏幕,因为小部件的 parent 决定了屏幕的位置 小部件。
由于parent的大小和位置,反过来也取决于 它自己的 parent,无法精确定义大小和 任何小部件的位置而不考虑树作为 一个整体。
如果 child 想要与其 parent 和 parent 不同的尺寸 没有足够的信息来对齐它,那么 child 的大小 可能会被忽略。定义对齐方式时要具体。
参考link:https://flutter.dev/docs/development/ui/layout/constraints