如何在 Flutter 中实现这一目标? 如何在 Flutter 中实现这一目标? 如何在 Flutter 中实现这一目标? 如何在 Flutter 中实现这一目标? 如何在 Flutter 中实现这一目标? 如何在 Flutter 中实现这一目标? 如何在 Flutter 中实现这一目标?
这是代码,的想法是使用没有背景的图像,代码使用 svg 图像来实现这一点,并使用 svg 包来打开具有该扩展名的图像。
import 'package:flutter/material.dart';
import 'package:flutter_svg/flutter_svg.dart';
class CustomCard extends StatelessWidget {
const CustomCard({super.key});
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(title: Text('Card demo'),),
body: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
MyCard(),
],
),
),
backgroundColor: Colors.grey.shade300,
);
}
}
class MyCard extends StatelessWidget {
const MyCard({super.key});
@override
Widget build(BuildContext context) {
return Container(
width: 200,
height: 400,
child: Stack(
alignment: Alignment.topLeft,
children: [
Column(
children: [
SizedBox(height: 60,),
Expanded(
child: Container(
width: double.infinity,
decoration: BoxDecoration(
borderRadius: BorderRadius.only(topLeft: Radius.circular(20),topRight: Radius.circular(20),),
color: Colors.pinkAccent,
),
),
),
Expanded(
child: Container(
decoration: BoxDecoration(
color: Colors.white,
borderRadius: BorderRadius.only(bottomLeft: Radius.circular(20), bottomRight: Radius.circular(20),)
),
child: Column(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: [
Padding(
padding: const EdgeInsets.all(8.0),
child: Row(
children: [
Text('\$ 172',
style: TextStyle(color: Colors.black),),
Spacer(),
Icon(Icons.favorite,color: Colors.red,),
],
),
),
Text('Your Description Here',style: TextStyle(color: Colors.black)),
],
),
),
),
],
),
Positioned(
left: 0,
top: 0,
child: Container(
width: 200,
height: 300,
child: SvgPicture.asset('lib/core/assets/images/4.svg',fit: BoxFit.cover),
),
)
],
),
);
}
}
这是结果:
希望对你有帮助。