英文:
How do I expand the positioned Container downwards?
问题
我正在尝试复制一个设计，但我在这方面遇到了困难。
在这个页面上，我试图将蓝色容器叠放在图像上并向下扩展，但我无法向下扩展。我使用了奇怪的颜色以增加对比度。我不想使用列，因为它没有“叠放”的效果。我觉得有一种更优雅的方法来做这件事。
这是当前的外观：
英文:
I am trying to replicate a design but I am having difficulty doing so.
On this page, I am trying to stack the blue container over an image and expand it downwards but I can't expand it downwards. I am using weird colours so the contrast can be there to see. I don't want to use a column because it doesn't have the 'stacked' effect. I feel like there is a more elegant way of doing this.
This is what it currently looks like
class IndividualNewsPage extends StatelessWidget {
final String articleURL;
IndividualNewsPage({this.articleURL});
@override
Widget build(BuildContext context) {
final screenHeight = MediaQuery.of(context).size.height;
return SafeArea(
child: Scaffold(
backgroundColor: Colors.red,
body: Column(
children: <Widget>[
Padding(
padding: EdgeInsets.all(30),
child: Row(
children: <Widget>[
Material(
color: Colors.transparent,
child: InkWell(
onTap: () => Navigator.pop(context),
child: Icon(
Icons.arrow_back_ios,
color: Colors.grey,
))),
Spacer(),
Text(
DateFormat.yMMMMd("en_US").format(DateTime.now()),
style: TextStyle(
color: Colors.black54,
fontWeight: FontWeight.w600,
fontSize: 15),
),
],
),
),
SizedBox(
height: 10,
),
Stack(
children: <Widget>[
Row(
children: <Widget>[
Expanded(
child: ClipRRect(
borderRadius: BorderRadius.only(
topLeft: Radius.circular(20),
topRight: Radius.circular(20)),
child: Container(
height: 400,
decoration: BoxDecoration(
color: Colors.blue,
image: DecorationImage(
image: NetworkImage(articleURL),
fit: BoxFit.fill)),
),
),
),
],
),
Positioned(
bottom: 30.0,
left: 0,
right: 0,
child: Container(
decoration: BoxDecoration(
color: Colors.blue,
borderRadius: BorderRadius.only(
topRight: Radius.circular(20),
topLeft: Radius.circular(20))),
child: Column(
children: <Widget>[
Padding(
padding: const EdgeInsets.all(16.0),
child: Text(
"New York",
style: TextStyle(
fontSize: 20.0,
fontWeight: FontWeight.bold,
),
),
),
Padding(
padding: const EdgeInsets.all(16.0),
child: Text(
"Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book."),
),
],
),
),
),
],
)
],
),
),
);
}
}
答案1
得分: 1
将Stack包装在Expanded小部件中。它将填充可用高度，蓝色小部件将位于Column的底部。
...,
Expanded(
child: Stack(...)
),
...
您可以在主方法中将debugPaintSizeEnabled设置为true，以查看小部件的边框、边距、位置等信息... 当构建UI时，它有助于解决小部件定位和大小的问题。
import 'package:flutter/rendering.dart';
void main() {
debugPaintSizeEnabled = true;
runApp();
}
英文:
Wrap Stack inside an Expanded widget. It will fill the available height and the blue widget will be positioned at the bottom of the Column.
...,
Expanded(
child: Stack(...)
),
...
You can set debugPaintSizeEnabled to true in the main method in order to see Widgets borders, margins, positions... It helps with Widget positioning and sizing problems when building UIs.
import 'package:flutter/rendering.dart'
void main() {
debugPaintSizeEnabled = true;
runApp();
}
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论