我正在制作一個帶有陰影的 ProjectTile 小部件，但是當我使用 顯示小部件時ListView.builder，保存 boxshadow 的容器會擴展超出 ProjectTile 的寬度，因此會出現如下圖所示的黑框。
ProjectTile 小部件的完整代碼
return Container(
margin: const EdgeInsets.only(bottom: 25),
height: 140,
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(15),
color: Colors.black,
boxShadow: [
BoxShadow(
color: Colors.black.withOpacity(.50),
blurRadius: 4,
offset: const Offset(0, 4),
),
],
),
child: Row(
children: [
Image.asset(
"assets/.jpg",
color: Colors.green,
width: 240,
),
// Container(
// width: 240,
// decoration: const BoxDecoration(
// borderRadius: BorderRadius.only(
// topLeft: Radius.circular(15),
// bottomLeft: Radius.circular(15)),
// color: Colors.black,
// image: DecorationImage(
// image: AssetImage("assets/.jpg"))),
// ),
SizedBox(
width: 500,
child: Container(
decoration: const BoxDecoration(
color: Color(0xFF585858),
borderRadius: BorderRadius.only(
topRight: Radius.circular(15),
bottomRight: Radius.circular(15))),
padding: const EdgeInsets.all(10),
child: Column(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Text("Project Name",
overflow: TextOverflow.ellipsis,
style: GoogleFonts.courierPrime(
fontSize: 24,
color: Colors.white,
)),
IconButton(
onPressed: () {},
icon: const Icon(
FontAwesomeIcons.bookmark,
size: 25,
color: Colors.white,
)),
],
),
const SizedBox(
height: 2,
),
SizedBox(
width: 400,
child: Text(
"Input an awesome a dfgsdfgsdfg sdfg sdfg sdfg sdfgsdfg sdfg fsd fnd catchy description for your project here. blah blah blah blah blah blah",
overflow: TextOverflow.ellipsis,
// softWrap: false,
maxLines: 3,
textAlign: TextAlign.start,
style: GoogleFonts.courierPrime(
color: Colors.white,
fontSize: 14,
)),
),
],
),
Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Container(
margin: const EdgeInsets.only(right: 5),
width: 20,
height: 20,
decoration: const BoxDecoration(
shape: BoxShape.circle,
image: DecorationImage(
fit: BoxFit.fill,
image: NetworkImage(
"https://i.imgur.com/BoN9kdC.png")))),
Text(
"longusername1234",
style: GoogleFonts.courierPrime(
color: const Color(0xFFC5C5C5)),
),
],
),
Text(
"10. marts 2021",
style: GoogleFonts.courierPrime(
color: const Color(0xFFC5C5C5)),
),
]),
],
),
),
)
],
));
ProjectTile 小部件父小部件。
return Expanded(
child: Container(
color: const Color(0xFF4B4B4B),
child: Column(
children: [
Container(
padding: const EdgeInsets.symmetric(vertical: 16, horizontal: 90),
decoration: BoxDecoration(
color: const Color(0xFF585858),
boxShadow: [
BoxShadow(
color: Colors.black.withOpacity(0.25),
blurRadius: 4,
offset: const Offset(0, 4),
),
],
),
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
// Search bar
SizedBox(
width: 232,
height: 40,
child: TextField(
textAlignVertical: TextAlignVertical.center,
cursorHeight: 24,
decoration: const InputDecoration(
...
),
style: GoogleFonts.courierPrime(
...
),
),
),
Row(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: [
OutlinedButton.icon(
onPressed: () {},
icon: const Icon(
...
),
label: Text(
...
),
),
OutlinedButton.icon(
onPressed: () {},
icon: const Icon(
...
label: Text(
...
),
),
OutlinedButton.icon(
onPressed: () {},
icon: const Icon(
...
),
label: Text(
...
),
),
],
),
],
),
),
Expanded(
child: ListView.builder(
padding: const EdgeInsets.all(20),
itemCount: 15,
itemBuilder: ((_, __) {
return const ProjectTile();
}),
),
),
],
),
),
);
uj5u.com熱心網友回復：
容器
一個容器首先用填充物圍繞子元素（由裝飾中存在的任何邊框膨脹），然后對填充的范圍應用額外的約束（將寬度和高度作為約束，如果其中一個為非空）。然后容器被從邊緣描述的額外空白空間包圍。
容器占用所有可用空間。如果您不希望它占用所有可用空間，您可能希望給它一個寬度。
所以出現了一個黑匣子
鑒于容器占用了所有可用空間，并且您擁有color:Colors.black容器顏色屬性，那么它按照指示作業。
如果您不想給它一個寬度但要占用最大空間，您可以嘗試擴展
Row-|
- Expanded (child, image, flex1
- Expanded (child, your tile data, flex 3,
轉載請註明出處，本文鏈接：https://www.uj5u.com/shujuku/461979.html