小部件中的容器溢出
问题描述 投票：0回答：1
我现在正在尝试在我的主页应用程序上执行此操作，但位置下容器中的代码出现了一些混乱。这就是我想要实现的目标
这就是我现在得到的：
知道我应该对代码进行什么更改才能使其像第一张图片中那样吗？我评论了订阅按钮，因为我溢出了更多像素
Stack(
children: [
Padding(
padding: const EdgeInsets.all(20.0),
child: Container(
alignment: Alignment.center,
decoration: BoxDecoration(
color: Colors.white,
borderRadius: BorderRadius.circular(30.0),
boxShadow: [
BoxShadow(
color: Colors.grey.withOpacity(0.5),
spreadRadius: 5,
blurRadius: 7,
offset: Offset(0, 3),
)
]),
child: SizedBox(
height: MediaQuery.of(context).size.height / 2.2,
width: MediaQuery.of(context).size.width / 1.1,
child: Column(children: [
Padding(
padding: const EdgeInsets.only(top: 35.0),
child: CircleAvatar(
radius: 50,
backgroundImage: ((snaps.data?.data()
as Map)['avatarUrl'] ==
'default')
? const NetworkImage(
"https://cdn.pixabay.com/photo/2015/10/05/22/37/blank-profile-picture-973460_1280.png"
// activity.imageUrl,
)
: NetworkImage((snaps.data?.data()
as Map)['avatarUrl']),
),
),
Container(
height: 170.0,
// width: double.infinity,
decoration: BoxDecoration(
color: Colors.white,
borderRadius: BorderRadius.circular(20.0),
),
child: Column(
crossAxisAlignment:
CrossAxisAlignment.center,
children: <Widget>[
SizedBox(
width: MediaQuery.of(context)
.size
.width *
0.5,
child: SizedBox(
width: 120.0,
child: Center(
child: Text(
(snaps.data?.data()
as Map)['name'],
// activity.name,
style: const TextStyle(
fontSize: 18.0,
fontWeight: FontWeight.w600,
),
overflow: TextOverflow.ellipsis,
maxLines: 2,
),
),
),
),
SizedBox(
width: MediaQuery.of(context)
.size
.width *
0.5,
child: SizedBox(
width: 120.0,
child: Center(
child: Text(
(snaps.data?.data()
as Map)['address'],
// activity.name,
style: const TextStyle(
fontSize: 18.0,
fontWeight: FontWeight.w600,
),
overflow: TextOverflow.ellipsis,
maxLines: 2,
),
),
),
),
Text(
(snapshot2.data?.data()
as Map)['category'],
// activity.type,
style: const TextStyle(
color: Colors.grey,
),
),
const SizedBox(
height: 20,
),
Container(
height: 80,
width: MediaQuery.of(context)
.size
.width *
0.75,
decoration: ShapeDecoration(
shape: const StadiumBorder(),
color: Colors.grey[200],
shadows: [
BoxShadow(
color: Colors.grey.shade400,
blurRadius: 10,
spreadRadius: 2,
),
],
),
child: const Row(
mainAxisAlignment:
MainAxisAlignment
.spaceEvenly,
children: [
Expanded(
child: Column(
mainAxisAlignment:
MainAxisAlignment
.center,
children: [
Text(
'Subscribers',
style: TextStyle(
fontWeight:
FontWeight
.bold),
),
Text('356',
style: TextStyle(
fontWeight:
FontWeight
.bold,
color: Colors
.grey)),
],
),
),
VerticalDivider(
indent: 8,
endIndent: 8,
),
Expanded(
child: Column(
mainAxisAlignment:
MainAxisAlignment
.center,
children: [
Text(
'Programs',
style: TextStyle(
fontWeight:
FontWeight
.bold),
),
Text('8',
style: TextStyle(
fontWeight:
FontWeight
.bold,
color: Colors
.grey)),
],
),
),
VerticalDivider(
indent: 8,
endIndent: 8,
),
Expanded(
child: Column(
mainAxisAlignment:
MainAxisAlignment
.center,
children: [
Text(
'Ratings',
style: TextStyle(
fontWeight:
FontWeight
.bold),
),
Text('5.0',
style: TextStyle(
fontWeight:
FontWeight
.bold,
color: Colors
.grey)),
],
),
),
])),
// const SizedBox(
// height: 10,
// ),
// SizedBox(
// width: MediaQuery.of(context)
// .size
// .width /
// 2.5,
// child: ElevatedButton(
// style: ElevatedButton.styleFrom(
// backgroundColor: Colors.black,
// padding:
// const EdgeInsets.symmetric(
// vertical: 16),
// shape: RoundedRectangleBorder(
// borderRadius:
// BorderRadius.circular(32),
// ),
// ),
// onPressed: () {},
// child: const Text(
// "SUBSCRIBE",
// style: TextStyle(
// color: Colors.white,
// fontWeight: FontWeight.bold),
// ),
// ),
// ),
]),
)
]),
),
),
),
Positioned(
right: 35,
child: TextButton(
style: TextButton.styleFrom(
shape: const StadiumBorder(),
backgroundColor: Colors.purple,
disabledBackgroundColor: Colors.black,
),
onPressed: null,
child: Text(
'🔥TOP 5',
style: TextStyle(
fontWeight: FontWeight.bold,
color: Colors.white,
),
),
),
)
],
),
1个回答
0
投票
投票
这是经过一些调整的代码：
Stack(
children: [
Padding(
padding: const EdgeInsets.all(20.0),
child: Container(
alignment: Alignment.center,
height: MediaQuery.of(context).size.height / 2.2,
width: MediaQuery.of(context).size.width / 1.1,
decoration: BoxDecoration(
color: Colors.white,
borderRadius: BorderRadius.circular(30.0),
boxShadow: [
BoxShadow(
color: Colors.grey.withOpacity(0.5),
spreadRadius: 5,
blurRadius: 7,
offset: Offset(0, 3),
)
],
),
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
CircleAvatar(
radius: 50,
backgroundImage: NetworkImage((snaps.data?.data() as Map)['avatarUrl'] ?? "https://cdn.pixabay.com/photo/2015/10/05/22/37/blank-profile-picture-973460_1280.png"),
),
SizedBox(height: 20),
SizedBox(
width: MediaQuery.of(context).size.width * 0.75,
child: Text(
(snaps.data?.data() as Map)['name'],
style: const TextStyle(
fontSize: 18.0,
fontWeight: FontWeight.w600,
),
overflow: TextOverflow.ellipsis,
maxLines: 2,
textAlign: TextAlign.center,
),
),
SizedBox(height: 10),
SizedBox(
width: MediaQuery.of(context).size.width * 0.75,
child: Text(
(snaps.data?.data() as Map)['address'],
style: const TextStyle(
fontSize: 18.0,
fontWeight: FontWeight.w600,
),
overflow: TextOverflow.ellipsis,
maxLines: 2,
textAlign: TextAlign.center,
),
),
SizedBox(height: 10),
Text(
(snapshot2.data?.data() as Map)['category'],
style: const TextStyle(
color: Colors.grey,
),
),
SizedBox(height: 20),
Container(
height: 80,
width: MediaQuery.of(context).size.width * 0.75,
decoration: ShapeDecoration(
shape: const StadiumBorder(),
color: Colors.grey[200],
shadows: [
BoxShadow(
color: Colors.grey.shade400,
blurRadius: 10,
spreadRadius: 2,
),
],
),
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: [
Expanded(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Text(
'Subscribers',
style: TextStyle(fontWeight: FontWeight.bold),
),
Text(
'356',
style: TextStyle(
fontWeight: FontWeight.bold,
color: Colors.grey,
),
),
],
),
),
VerticalDivider(indent: 8, endIndent: 8),
Expanded(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Text(
'Programs',
style: TextStyle(fontWeight: FontWeight.bold),
),
Text(
'8',
style: TextStyle(
fontWeight: FontWeight.bold,
color: Colors.grey,
),
),
],
),
),
VerticalDivider(indent: 8, endIndent: 8),
Expanded(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Text(
'Ratings',
style: TextStyle(fontWeight: FontWeight.bold),
),
Text(
'5.0',
style: TextStyle(
fontWeight: FontWeight.bold,
color: Colors.grey,
),
),
],
),
),
],
),
),
],
),
),
),
Positioned(
right: 35,
child: TextButton(
style: TextButton.styleFrom(
shape: const StadiumBorder(),
backgroundColor: Colors.purple,
disabledBackgroundColor: Colors.black,
),
onPressed: null,
child: Text(
'🔥TOP 5',
style: TextStyle(
fontWeight: FontWeight.bold,
color: Colors.white,
),
),
),
),
],
);
最新问题
- 如何生成设定长度的所有可能的二进制序列——给定序列的设定部分
- 没有唯一 ID 的按钮选择器
- 无法对非表 SQLModel 进行验证
- 如何在 Kotlin 中删除 TextInputEditText 错误下划线（不是基本下划线）。房产名称是什么？
- 带有 Promises 的 Javascript Fetch API - 传递 HTTP 响应代码
- 通过id键查找2个表中不同值的列表
- 如何在Django中正确打印模型对象？
- 如何检查正则表达式字符串是否符合PCRE？
- VSCode - PHP - 移动类后更新命名空间和其他文件的导入
- 连接到 MongoDB 时出现错误“无法检索服务器信息 BSONError：BSON 中的 UTF-8 字符串无效”文档
- Tkinter的源文件除了__init__之外没有任何函数文件，是空的
- 如何根据 Grafana 中的查询设置面板标题和显示名称？
- 中止 tkinter 中的进度条
- 如何在 Backblaze B2（S3 兼容 API）中限制存储桶上传大小？
- Stripe() 的值无效：apiKey 应为字符串。您指定：未定义
- 当我使用 s3.get_paginator('list_objects_v2') 时，AWS 错误“调用调用 API 操作失败并显示此消息：速率超出”
- 如何从 eulerr [r] 包创建绘图的面板布局
- 如果电子邮件不是 gmail，则在 Google Drive API 中搜索具有读者权限的文件
- 为什么线夹不能与填充一起使用？
- 如何配置 vscode 以开始在输出面板中获取输入
© www.soinside.com 2019 - 2024. All rights reserved.