编辑:
问题:为什么 flutter 中的 some
Container
占据了整个屏幕的高度,而其他的则没有?
让我举例说明:
@override
Widget build(BuildContext context) {
return MaterialApp(
debugShowCheckedModeBanner: false,
home: Scaffold(
body: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Text("This is Text 1"),
Container(), // 👈 This doesn't take full height of the screen
Text("This is Text 2 ")
],
)
// bottomNavigationBar: Container(), // 👈 Where as this take
));
}
这看起来很奇怪,有没有具体的解释?
答案:
对于
Container
不采取完整的height
替换它
SizedBox.shrink()
原题:
我遇到了这个奇怪的错误,这是我第一次目睹,并且不知道它的发生。
body: Text("Hello"),
bottomNavigationBar: BlocBuilder<UserCubit, UserState>(
builder: (context, state) {
if (state.userModel?.cartTotalDiscountedPrice != 0) {
return Material(...);
}
return Container();
},
问题是当
state.userModel?.cartTotalDiscountedPrice
的值为0
时,body不显示,这里hello
不显示
BlocBuilder
的bottomNavigationBar
如何影响body
?
输出:
何时
state.userModel?.cartTotalDiscountedPrice != 0
何时
state.userModel?.cartTotalDiscountedPrice == 0
我认为这不是 BlocBuilder 的问题。这可以用下面的代码重现:
class Demo extends StatelessWidget {
const Demo({super.key});
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: const Text('Demo Cart'),
),
body: const Center(child: Text('Hello')),
bottomNavigationBar: Container());
}
}
有一个容器或任何其他没有尺寸的小部件导致脚手架主体在上方移动。
没有孩子的容器尽量大,除非 传入的约束是无界的,在这种情况下,它们试图成为 尽可能小。
需要空位可以用
SizedBox.shrink()
更新:
总结:容器尝试,为了:尊重对齐,调整自己的大小以适应孩子,尊重宽度,高度和约束,扩展以适应父母,尽可能小。
更具体地说:
如果小部件没有子部件,没有高度,没有宽度,没有约束,并且父部件提供无界约束,那么 Container 会尝试尽可能小。
如果小部件没有子项也没有对齐,但提供了高度、宽度或约束,则考虑到这些约束和父项约束的组合,容器会尝试尽可能小。
如果小部件没有孩子,没有高度,没有宽度,没有约束,也没有对齐方式,但是父级提供了有界约束,那么 Container 会扩展以适应父级提供的约束。
如果小部件有对齐方式,并且父级提供无界约束,则容器会尝试围绕子级调整自身大小。
如果小部件具有对齐方式,并且父级提供了有界约束,则容器会尝试扩展以适合父级,然后根据对齐方式将子级定位在自身内。
否则,小部件有一个孩子但没有高度,没有宽度,没有约束,也没有对齐,并且容器将约束从父级传递给子级并调整自身大小以匹配子级。
Container
课程