我想制作一個如下圖所示的單元格。
你可以只用容器或只用中心的影像來做，但我很難同時建立這兩者。
下面是我試過的代碼
Container(
width: wi/3 - 10,
height: wi/3 - 10,
decoration: BoxDecoration(
color: isSelected ? Theme.of(context).colorScheme.darkBlack : Theme.of(context).colorScheme.lightBlack,
borderRadius: BorderRadius.circular(10),
image: const DecorationImage(
fit: BoxFit.scaleDown,
image: NetworkImage("https://www.gamba-osaka.net/c/faq/images/default.jpg"),
)
),
child: Align(
alignment: Alignment.bottomCenter,
child: Container(
constraints: const BoxConstraints.tightFor(
width: double.infinity,
),
decoration: const BoxDecoration(
color: Colors.redAccent,
borderRadius: BorderRadius.only(
bottomLeft: Radius.circular(10),
bottomRight: Radius.circular(10),
),
),
child: const Padding(
padding: EdgeInsets.all(4.0),
child: Text("Following",
textAlign: TextAlign.center,
),
),
),
),
),
謝謝你讀到這里
uj5u.com熱心網友回復：
嘗試這個：
ClipRRect(
borderRadius: BorderRadius.circular(10),
child: Container(
width: wi / 3 - 10,
height: wi / 3 - 10,
decoration: const BoxDecoration(
color: Colors.black54,
),
child: Stack(
children: [
Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Image.network(
"https://www.gamba-osaka.net/c/faq/images/default.jpg"),
const Text(
"Text",
style: TextStyle(color: Colors.white),
),
const SizedBox(height: 15),
],
),
Positioned(
bottom: 0,
child: Container(
width: wi / 3 - 10,
decoration: const BoxDecoration(color: Colors.yellowAccent),
child: const Padding(
padding: EdgeInsets.all(4.0),
child: Text(
"Following",
textAlign: TextAlign.center,
),
),
),
)
],
),
),
)
轉載請註明出處，本文鏈接：https://www.uj5u.com/qukuanlian/489968.html