Flutter Stack 没有达到全高
Flutter Stack is not Getting Full Height
我想将容器覆盖到 Stack 中的第一个容器。但是当这样做的时候,它是有效的但是当我给第一个高度时它只是占据这个高度而第二个容器只是卡住并且没有占据全高。
我想要这个,但是“这是我的文本”容器应该占满高度但它不会?
但是当我使用 fit : StackFit.expand
时。它确实如我所愿,但第一个落后了。
这是我的代码
double topHeightPadding = MediaQuery.of(context).padding.top;
double heightForStack = (MediaQuery.of(context).size.height - 90);
return Scaffold(
body: Stack(
fit : StackFit.expand,
children: <Widget>[
Container(
height: topHeightPadding + 120,
decoration: const BoxDecoration(
color: Color(0xFF141D38),
),
child: const Center(
child: Text(
"SOMETEXT.COM",
style: TextStyle(color: Colors.white),
textScaleFactor: 1.4,
)),
),
Positioned(
top: topHeightPadding + 90,
left: 0.1,
right: 0.1,
bottom: 0,
child: Container(
width: MediaQuery.of(context).size.width,
height: heightForStack,
decoration: const BoxDecoration(
// color: Colors.red,
color: Color(0xFFFFFFFF),
borderRadius: BorderRadius.only(
topLeft: Radius.circular(35),
topRight: Radius.circular(35)),
boxShadow: [
BoxShadow(
color: Color(0xE6808080),
spreadRadius: 5,
blurRadius: 5,
offset: Offset(0, 2),
),
],
),
child: const Center(
child: Text('THIS IS MY TEXT')
),
))
],
),
);
如有任何帮助,我们将不胜感激。
回答自己的问题:https://whosebug.com/help/self-answer
我刚刚知道如何添加一个高度为 double.infinity
的容器。
代码:
double topHeightPadding = MediaQuery.of(context).padding.top;
double heightForStack = (MediaQuery.of(context).size.height - 90);
return Scaffold(
body: Stack(
// fit : StackFit.expand,
children: <Widget>[
Container(height: double.infinity,),
Container(
height: topHeightPadding + 120,
decoration: const BoxDecoration(
color: Color(0xFF141D38),
),
child: const Center(
child: Text(
"SOMETEXT.COM",
style: TextStyle(color: Colors.white),
textScaleFactor: 1.4,
)),
),
Positioned(
top: topHeightPadding + 90,
left: 0.1,
right: 0.1,
bottom: 0,
child: Container(
width: MediaQuery.of(context).size.width,
height: heightForStack,
decoration: const BoxDecoration(
// color: Colors.red,
color: Color(0xFFFFFFFF),
borderRadius: BorderRadius.only(
topLeft: Radius.circular(35),
topRight: Radius.circular(35)),
boxShadow: [
BoxShadow(
color: Color(0xE6808080),
spreadRadius: 5,
blurRadius: 5,
offset: Offset(0, 2),
),
],
),
child: const Center(
child: Text('THIS IS MY TEXT')
),
))
],
),
);
我想将容器覆盖到 Stack 中的第一个容器。但是当这样做的时候,它是有效的但是当我给第一个高度时它只是占据这个高度而第二个容器只是卡住并且没有占据全高。
我想要这个,但是“这是我的文本”容器应该占满高度但它不会?
但是当我使用 fit : StackFit.expand
时。它确实如我所愿,但第一个落后了。
这是我的代码
double topHeightPadding = MediaQuery.of(context).padding.top;
double heightForStack = (MediaQuery.of(context).size.height - 90);
return Scaffold(
body: Stack(
fit : StackFit.expand,
children: <Widget>[
Container(
height: topHeightPadding + 120,
decoration: const BoxDecoration(
color: Color(0xFF141D38),
),
child: const Center(
child: Text(
"SOMETEXT.COM",
style: TextStyle(color: Colors.white),
textScaleFactor: 1.4,
)),
),
Positioned(
top: topHeightPadding + 90,
left: 0.1,
right: 0.1,
bottom: 0,
child: Container(
width: MediaQuery.of(context).size.width,
height: heightForStack,
decoration: const BoxDecoration(
// color: Colors.red,
color: Color(0xFFFFFFFF),
borderRadius: BorderRadius.only(
topLeft: Radius.circular(35),
topRight: Radius.circular(35)),
boxShadow: [
BoxShadow(
color: Color(0xE6808080),
spreadRadius: 5,
blurRadius: 5,
offset: Offset(0, 2),
),
],
),
child: const Center(
child: Text('THIS IS MY TEXT')
),
))
],
),
);
如有任何帮助,我们将不胜感激。
回答自己的问题:https://whosebug.com/help/self-answer
我刚刚知道如何添加一个高度为 double.infinity
的容器。
代码:
double topHeightPadding = MediaQuery.of(context).padding.top;
double heightForStack = (MediaQuery.of(context).size.height - 90);
return Scaffold(
body: Stack(
// fit : StackFit.expand,
children: <Widget>[
Container(height: double.infinity,),
Container(
height: topHeightPadding + 120,
decoration: const BoxDecoration(
color: Color(0xFF141D38),
),
child: const Center(
child: Text(
"SOMETEXT.COM",
style: TextStyle(color: Colors.white),
textScaleFactor: 1.4,
)),
),
Positioned(
top: topHeightPadding + 90,
left: 0.1,
right: 0.1,
bottom: 0,
child: Container(
width: MediaQuery.of(context).size.width,
height: heightForStack,
decoration: const BoxDecoration(
// color: Colors.red,
color: Color(0xFFFFFFFF),
borderRadius: BorderRadius.only(
topLeft: Radius.circular(35),
topRight: Radius.circular(35)),
boxShadow: [
BoxShadow(
color: Color(0xE6808080),
spreadRadius: 5,
blurRadius: 5,
offset: Offset(0, 2),
),
],
),
child: const Center(
child: Text('THIS IS MY TEXT')
),
))
],
),
);