我正在颤振中构建折扣优惠券卡
为此,我尝试旋转卡片名称,但在将容器与父容器左侧对齐时遇到问题。
这是我的完整卡代码
Container(
height: 100,
padding:
const EdgeInsets.all(0),
margin: const EdgeInsets.only(
top: 15),
decoration: BoxDecoration(
borderRadius:
BorderRadius.circular(
30),
border: Border.all(
width: 2,
color: Colors
.grey.shade400),
),
child: Row(
children: [
Transform.rotate(
angle: 90 *
(3.141592653589793 /
180),
child: Container(
width: 100,
height: 40,
alignment:
FractionalOffset
.centerLeft,
decoration:
const BoxDecoration(
color: Colors.green,
borderRadius:
BorderRadius
.only(
bottomLeft: Radius
.circular(30),
bottomRight:
Radius
.circular(
30),
),
),
padding:
const EdgeInsets
.all(10),
child: Center(
child: Text(
index == 0
? "MAGIC"
: index == 1
? "SUPER"
: "DELUXE",
textAlign:
TextAlign
.center,
style: const TextStyle(
color: Pallete
.whiteColor,
fontWeight:
FontWeight
.w600),
),
),
),
),
const SizedBox(
width: 10,
),
Column(
crossAxisAlignment:
CrossAxisAlignment
.start,
mainAxisAlignment:
MainAxisAlignment
.center,
children: [
Text(
index == 0
? "MAGIC"
: index == 1
? "SUPER"
: "DELUXE",
textAlign: TextAlign
.center,
style: const TextStyle(
fontWeight:
FontWeight
.w600),
),
const SizedBox(
height: 5,
),
Text(
"Get ${selectedOffers[index]['discount']} off"),
const Divider(),
const SizedBox(
height: 10,
),
Text(
"Min. ₹ ${(double.tryParse(selectedOffers[index]['minOrder']) ?? 0) * (double.tryParse(selectedOffers[index]['discount'].replaceAll('%', '')) ?? 0) / 100}")
],
),
const Spacer(),
TextButton(
onPressed: () {},
child: Text("Apply"))
],
),
)
此处,在图像上如何删除旋转容器上的左侧间距(绿色) 我使用了 Transform.rotate 小部件,但这并没有将容器向左对齐,为什么会出现这个间距,请帮忙
尝试一下并添加您的条件
Container(
height: 100,
padding: const EdgeInsets.all(0),
margin: const EdgeInsets.only(top: 15),
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(30),
border: Border.all(
width: 2, color: Colors.grey.shade400),
),
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Container(
width: 40,
height: 100,
decoration: const BoxDecoration(
borderRadius: BorderRadius.only(
bottomLeft: Radius.circular(28),
topLeft: Radius.circular(28)),
color: Colors.green,
),
child: const Center(
child: RotatedBox(
quarterTurns: 1,
child: Text(
'MAGIC',
textAlign: TextAlign.center,
style: TextStyle(
color: Colors.white,
fontWeight: FontWeight.w600),
),
),
)),
const Padding(
padding: EdgeInsets.only(top: 8, bottom: 8),
child: Column(
crossAxisAlignment:
CrossAxisAlignment.start,
children: [
Text(
'Super',
textAlign: TextAlign.center,
style: TextStyle(
fontWeight: FontWeight.w600),
),
Text('Get 10 % off'),
Spacer(),
Text('Min. ₹ 358'),
],
),
),
TextButton(
onPressed: () {},
child: const Text("Apply"))
],
))