flutter - 堆栈儿童在图像上溢出
问题描述
即使在这个黑色容器溢出后,我也会在堆栈中剪辑到硬边,如果我适合,我该如何解决:BoxFit.fill 图像被拉伸。我尝试将堆栈包裹在容器或卡片中,然后夹到没有用的haredge
这是我尝试过的代码
Stack(
children: [
Container(
clipBehavior: Clip.hardEdge,
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(15),
image: DecorationImage(
image: AssetImage(widget.image), fit: BoxFit.fill),
),
),
Positioned(
left: 0,
right: 0,
bottom: 0,
child: Container(
height: 43,
width: 162,
decoration: BoxDecoration(
color: Colors.black.withOpacity(0.35),
borderRadius: const BorderRadius.only(bottomLeft: Radius.circular(15),bottomRight: Radius.circular(15)),
),
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Row(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Text(widget.info,style: RecentChats.likedetails,),
Padding(
padding: const EdgeInsets.only(left: 3),
child: Container(
height: 4,
width: 4,
decoration: const BoxDecoration(
color: DatingColoCodes.blue,
shape: BoxShape.circle,
),
),
),
],
),
Text(widget.view,style: RecentChats.viewprofile,),
],
)),
)
],
);
解决方案
无法使用给定的代码段重现,当我运行它时它对我来说很好,也许尝试放置完整的代码段?
但无论如何,您可以在没有Stack
小部件的情况下实现相同的行为,只需将s 作为持有图像的Text
s 的子项。Container
这是工作示例,您可以复制粘贴并在 DartPad 中运行
import 'package:flutter/material.dart';
final Color darkBlue = Color.fromARGB(255, 18, 32, 47);
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
theme: ThemeData.dark().copyWith(scaffoldBackgroundColor: darkBlue),
debugShowCheckedModeBanner: false,
home: Scaffold(
body: Center(
child: MyWidget(),
),
),
);
}
}
class MyWidget extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
body: Container(
padding: const EdgeInsets.all(30),
child: GridView.count(
crossAxisCount: 2,
crossAxisSpacing: 20,
mainAxisSpacing: 8,
childAspectRatio: 0.8,
children: [
for (int i=0; i<20; i++)
Container(
clipBehavior: Clip.hardEdge,
decoration: BoxDecoration(
color: Colors.green,
borderRadius: BorderRadius.circular(20),
image: DecorationImage(
image: NetworkImage('https://source.unsplash.com/random'),
fit: BoxFit.cover,
),
),
/// For some reason, GridView / Container are stretching
/// the height, forcing it to be in full height so we gotta
/// do some hack, we put a Column, and then put the Container
/// with the texts inside the Column as well and make the height
/// as height as the item height by using `MainAxisSize.min`.
///
/// The first Column is to position the Container inside it to
/// the bottom of the item (see: `MainAxisAlignment.end`) and force
/// the width to be full width by using `CrossAxisAlignment.stretch`
///
/// Lastly, we do a `Clip.hardEdge` to prevent the text container
/// to apear sharp-squared and follow the roundness of the parent
/// container instead.
child: Column(
crossAxisAlignment: CrossAxisAlignment.stretch,
mainAxisSize: MainAxisSize.min,
mainAxisAlignment: MainAxisAlignment.end,
children: [
Container(
color: Colors.red.withOpacity(0.70),
padding: const EdgeInsets.symmetric(vertical: 8),
child: Column(
mainAxisSize: MainAxisSize.min,
children: [
Text('Hello item $i'),
Text('Washington DC'),
],
),
),
],
),
),
],
),
),
);
}
}
旁注:当我说“强制它为全高”时,这意味着添加高度属性根本不起作用,这就是我放置一列的原因。
推荐阅读
- twilio - 有没有办法访问从 Twilio 的 VoiceResponse 说出的实际音频?
- google-translate - 防止特定文本(例如命名实体)被任何语言翻译器(如谷歌翻译器等)翻译的最佳方法是什么?
- javascript - 如何使用 for 循环为数组中的每个书 ID 生成一个带有 li 元素的函数(或多个函数)?
- javascript - 可通过 http.get 观察
- wordpress - 联系表格 7 日期选择器 - 日期格式不适用于英语以外的其他语言
- asp.net-mvc - 我需要在 MVC 5 中获取当前用户名
- c - 这个“静态”变量的定义是错误的、误导的,还是两者都不是?
- laravel-5 - 如何在 Laravel 中将现有属性设置为日期属性?
- sql - 使用列名作为日期取消透视
- python - 如何为函数创建循环?