flutter - Flutter Stack 定位和溢出
问题描述
我目前正在研究颤振。我正在将堆栈用于堆栈 2 小部件。但我有一些问题。
那是我的代码:
class UpcomingSessionItem extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Stack(
clipBehavior: Clip.none,
alignment: AlignmentDirectional.bottomCenter,
children: [
ClipRRect(
borderRadius: BorderRadius.circular(25),
child: Image.asset('assets/images/yoga-1.jpg')),
Container(
height: 100,
padding: EdgeInsets.all(20),
color: Colors.white,
child: Column(
children: [
Row(
children: [
Column(
children: [
Text(
"9 am - 10:30 am",
style: TextStyle(fontWeight: FontWeight.bold),
),
Text("Yoga for Beginners with Emily Cassel")
],
)
],
)
],
),
),
],
);
}
}
解决方案
用 Positioned Widget 包裹堆栈内的 Container(Widget) 并设置底部、左侧和右侧属性。你会得到输出
您可以通过在编辑器中复制粘贴来尝试此代码。
示例代码在这里
import 'package:flutter/material.dart';
class StackExample extends StatefulWidget {
@override
_StackExampleState createState() => _StackExampleState();
}
class _StackExampleState extends State<StackExample> {
@override
void initState() {
super.initState();
}
@override
Widget build(BuildContext context) {
return
Container(
alignment: Alignment.center,
padding: EdgeInsets.all(20),
child: Stack(
clipBehavior: Clip.none,
alignment: AlignmentDirectional.bottomCenter,
children: [
ClipRRect(borderRadius: BorderRadius.circular(25), child: Image.asset('assets/image.png')),
Positioned(
bottom: -50,
right: 20,
left: 20,
child: Container(
height: 150,
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(15),
color: Colors.white,
),
padding: EdgeInsets.all(20),
alignment: Alignment.center,
child: Column(
mainAxisSize: MainAxisSize.min,
mainAxisAlignment: MainAxisAlignment.center,
crossAxisAlignment: CrossAxisAlignment.center,
children: [
Text(
"TITLE",
textAlign: TextAlign.center,
style: TextStyle(fontWeight: FontWeight.bold, fontSize: 18, decoration: TextDecoration.none, color: Colors.black),
),
SizedBox(
height: 20,
),
Text(
"Hey, There?",
textAlign: TextAlign.center,
style: TextStyle(fontWeight: FontWeight.bold, fontSize: 14, decoration: TextDecoration.none, color: Colors.black),
),
SizedBox(
height: 20,
),
Text(
"This is the example",
textAlign: TextAlign.center,
style: TextStyle(fontSize: 15, decoration: TextDecoration.none, color: Colors.black),
)
],
),
),
),
],
),
);
}
}
推荐阅读
- python - 如何有效地计算多个列表的共现计数?
- amazon-ec2 - 尽管命令正在 AWS EC2 实例上的终端上运行,但 Cron 作业无法正常工作
- c++ - 用于从 Java 移植到 C++ 的文本字符串的 3 路基数快速排序
- python - FFMPEG:向视频添加多个垂直堆叠的绘图文本
- javascript - Javascript 24 小时到 12 小时
- java - 使用 Java Stream 从文件中实例化对象
- python - 如何在值内转义分隔符
- android-studio - Error when downloading a file with url into internal storage Android Studio
- gmail-api - 为什么我的员工在通过 PipelineDeals 发送电子邮件时收到此消息?
- powerquery - Power Query:查找组内的百分位数