颤振定位堆栈复杂设计
我为此感到困惑，如何实现此设计？我的代码包括带有容器背景图像的堆栈小部件，但显示不正确。
我尝试过，它的显示像是波纹图像，
我想设计与第一张图片完全一样的东西，我坚持放置小型相机图标，背景图片，立即购买横幅等的位置，这是我的代码-
Stack(
children: [
Container(
decoration: new BoxDecoration(
// color: Colors.transparent,
image: new DecorationImage(
fit: BoxFit.fill,
image: new AssetImage(
'images/icons/egle2.png',
),
),
),
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceAround,
children: [
Column(
children: [
Stack(
alignment: Alignment.topCenter,
children: [
Container(
height: 100,
width: 100,
),
Positioned(
// right: 1.0,
child: Material(
elevation: 8.0,
color: Colors.blue,
shape: CircleBorder(),
child: CircleAvatar(
maxRadius: 50,
minRadius: 40,
backgroundColor: Colors.transparent,
backgroundImage: AssetImage(
'images/icons/jully.png'),
),
),
),
// SizedBox(
// width: 20,
// ),
Positioned(
right: 0.0,
top: 0.0,
child: Align(
alignment: Alignment.topRight,
child: Image.asset(
'images/icons/camera.png',
// height: ,
// width: 25,
),
),
),
],
),
SizedBox(
height: 5,
),
Text(
'Jully',
style: TextStyle(
color: Colors.white, fontSize: 18),
),
SizedBox(
height: 5,
),
GestureDetector(
onTap: null,
child: Container(
padding: EdgeInsets.all(5),
height: 25,
// width: 30,
decoration: BoxDecoration(
color: UniversalVariables.yellowColor,
borderRadius: BorderRadius.circular(4),
),
child: Row(
children: [
Icon(
Icons.card_giftcard,
size: 15,
),
SizedBox(
width: 2,
),
Text(
'ID: 123875',
style: TextStyle(fontSize: 12),
),
],
),
),
),
SizedBox(
height: 200,
),
],
),
Column(
children: [
Stack(
alignment: Alignment.topCenter,
children: [
Container(
height: 100,
width: 100,
),
Positioned(
right: 1.0,
child: Material(
elevation: 8.0,
color: Colors.blue,
shape: CircleBorder(),
child: CircleAvatar(
maxRadius: 50,
minRadius: 40,
backgroundColor: Colors.transparent,
backgroundImage:
AssetImage('images/icons/king.png'),
),
),
),
SizedBox(
width: 20,
),
Positioned(
right: 0.0,
top: 0.0,
child: Align(
alignment: Alignment.topRight,
child: Image.asset(
'images/icons/camera.png',
// height: ,
// width: 25,
),
),
),
],
),
SizedBox(
height: 5,
),
Text(
'King_20',
style: TextStyle(
color: Colors.white, fontSize: 18),
),
SizedBox(
height: 5,
),
GestureDetector(
onTap: null,
child: Container(
padding: EdgeInsets.all(5),
height: 25,
// width: 30,
decoration: BoxDecoration(
color: UniversalVariables.yellowColor,
borderRadius: BorderRadius.circular(4),
),
child: Row(
children: [
Icon(
Icons.card_giftcard,
size: 15,
),
SizedBox(
width: 2,
),
Text(
'ID: 123875',
style: TextStyle(fontSize: 12),
),
],
),
),
),
],
),
Column(
children: [
Stack(
alignment: Alignment.topCenter,
children: [
Container(
height: 100,
width: 100,
),
Positioned(
right: 1.0,
child: Material(
elevation: 8.0,
color: Colors.blue,
shape: CircleBorder(),
child: CircleAvatar(
maxRadius: 50,
minRadius: 40,
backgroundColor: Colors.transparent,
backgroundImage:
AssetImage('images/icons/hulk.png'),
),
),
),
SizedBox(
width: 20,
),
Positioned(
// top: 5.0,
right: 0.0,
child: Container(
child: Image.asset(
'images/icons/camera.png',
// height: ,
// width: 25,
),
),
),
],
),
SizedBox(
height: 5,
),
Text(
'Hulk',
style: TextStyle(
color: Colors.white, fontSize: 18),
),
SizedBox(
height: 5,
),
GestureDetector(
onTap: null,
child: Container(
padding: EdgeInsets.all(5),
height: 25,
// width: 30,
decoration: BoxDecoration(
color: UniversalVariables.yellowColor,
borderRadius: BorderRadius.circular(4),
),
child: Row(
children: [
Icon(
Icons.card_giftcard,
size: 15,
),
SizedBox(
width: 2,
),
Text(
'ID: 123875',
style: TextStyle(fontSize: 12),
),
],
),
),
),
SizedBox(
height: 200,
),
// Stack(
// alignment: Alignment.topCenter,
// children: [
// Container(
// height: 100,
// width: 100,
// ),
// Positioned(
// right: 1.0,
// child: Material(
// elevation: 8.0,
// color: Colors.blue,
// shape: CircleBorder(),
// child: CircleAvatar(
// maxRadius: 50,
// minRadius: 40,
// backgroundColor: Colors.transparent,
// backgroundImage: AssetImage(
// 'images/icons/happyman.png'),
// ),
// ),
// ),
// SizedBox(
// width: 20,
// ),
// Positioned(
//// top: 5.0,
// right: 0.0,
// child: Container(
// child: Image.asset(
// 'images/icons/camera.png',
//// height: ,
//// width: 25,
// ),
// ),
// ),
// ],
// ),
// SizedBox(
// height: 5,
// ),
// Text(
// 'Happy Man',
// style: TextStyle(
// color: Colors.white, fontSize: 18),
// ),
// SizedBox(
// height: 5,
// ),
// GestureDetector(
// onTap: null,
// child: Container(
// padding: EdgeInsets.all(5),
// height: 25,
//// width: 30,
// decoration: BoxDecoration(
// color: UniversalVariables.yellowColor,
// borderRadius: BorderRadius.circular(4),
// ),
// child: Row(
// children: [
// Icon(
// Icons.card_giftcard,
// size: 15,
// ),
// SizedBox(
// width: 2,
// ),
// Text(
// 'ID: 123875',
// style: TextStyle(fontSize: 12),
// ),
// ],
// ),
// ),
// ),
],
),
],
),
),
Positioned.fill(
top: 280,
child: Container(
color: Colors.yellow,
height: 100,
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Padding(
padding: const EdgeInsets.only(left: 20),
child: Container(
child: Row(
children: [
Image.asset('images/icons/badge4.png',),
SizedBox(width: 10,),
Text(
"X 70 = \$10",
style: TextStyle(
fontSize: 18,
fontWeight: FontWeight.bold),
),
],
),
),
),
Padding(
padding: const EdgeInsets.only(right: 20),
child: GestureDetector(
onTap: null,
child: Container(
padding: EdgeInsets.all(8),
height: 35,
// width: 30,
decoration: BoxDecoration(
color: UniversalVariables.blackColor,
borderRadius: BorderRadius.circular(4),
),
child: Row(
children: [
Text(
'Buy Now',
textAlign: TextAlign.center,
style:
TextStyle(color: Colors.white),
),
],
),
),
),
),
],
),
),
),
],
),
1 个答案:
答案 0 :(得分：0)
像往常一样，可能会有更好的示例说明如何实现此结果。
这是重新创建它的快速尝试。它需要进行一些微调以适合任何屏幕尺寸，还需要使用AutoSizeText并重写PersonDrawer来进行响应。
但我希望它能帮助您朝正确的方向前进。
class MySuperCoolStackWidget extends StatelessWidget {
final double baseWidth = 520.0;
final double baseHeight = 345.0;
double fromWidth(double size, BoxConstraints constraints) {
return size / baseWidth * constraints.maxWidth;
}
double fromHeight(double size, BoxConstraints constraints) {
return size / baseHeight * constraints.maxHeight;
}
@override
Widget build(BuildContext context) {
return AspectRatio(
aspectRatio: baseWidth / baseHeight,
child: LayoutBuilder(
builder: (context, constraints) {
return Stack(
children: <Widget>[
Container(
decoration: BoxDecoration(
color: Colors.black,
),
),
AspectRatio(
aspectRatio: 520.0 / 260.0,
child: Container(
padding: EdgeInsets.fromLTRB(
fromWidth(20.0, constraints),
fromHeight(40.0, constraints),
fromWidth(20.0, constraints),
fromHeight(20.0, constraints),
),
child: LayoutBuilder(
builder: (_, innerConstraints){
return Row(
children: <Widget>[
Expanded(
child: PersonDrawer(),
),
SizedBox(
width: fromWidth(20.0, constraints),
),
Expanded(
child: Transform.translate(
offset: Offset(0.0, innerConstraints.maxHeight / 2.0),
child: PersonDrawer(),
),
),
SizedBox(
width: fromWidth(20.0, constraints),
),
Expanded(
child: PersonDrawer(),
),
],
);
},
),
),
),
Positioned(
left: 0,
right: 0,
bottom: fromHeight(20.0, constraints),
child: AspectRatio(
aspectRatio: 520.0 / 65.0,
child: Container(
padding: EdgeInsets.symmetric(
vertical: fromHeight(16.0, constraints),
horizontal: fromWidth(32.0, constraints),
),
color: Colors.orange[400],
child: Row(
children: <Widget>[
Expanded(
child: Row(
children: <Widget>[
Icon(Icons.local_florist),
Text('x 70 = \$10'),
],
),
),
RaisedButton(
color: Colors.black,
textColor: Colors.white,
onPressed: () {},
child: Text('Buy now'),
),
],
),
),
),
),
],
);
},
),
);
}
}
class PersonDrawer extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Container(
decoration: BoxDecoration(
color: Colors.white10,
border: Border.all(color: Colors.white12),
borderRadius: BorderRadius.circular(10.0),
),
child: Column(
children: <Widget>[
Expanded(
child: Stack(
fit: StackFit.expand,
children: <Widget>[
Container(
padding: EdgeInsets.all(10.0),
child: AspectRatio(
aspectRatio: 1.0,
child: Container(
decoration: BoxDecoration(
shape: BoxShape.circle,
color: Colors.white,
),
),
),
),
Positioned(
top: 5.0,
right: 5.0,
child: Icon(
Icons.camera,
color: Colors.white,
),
),
],
),
),
SizedBox(height: 5.0),
Container(
padding: EdgeInsets.all(10.0),
child: Column(
children: <Widget>[
Text(
'King_20',
style: TextStyle(
color: Colors.white,
),
),
SizedBox(height: 5.0),
Container(
padding: EdgeInsets.all(2.0),
decoration: BoxDecoration(
color: Colors.orange[400],
borderRadius: BorderRadius.circular(5.0),
),
child: Row(
mainAxisSize: MainAxisSize.min,
children: <Widget>[
Icon(Icons.perm_identity, size: 10.0),
Text(
'ID: 1234567',
style: TextStyle(
fontSize: 10.0,
),
),
],
),
),
],
),
)
],
),
);
}
}
相关问题
最新问题
- 我写了这段代码，但我无法理解我的错误
- 我无法从一个代码实例的列表中删除 None 值，但我可以在另一个实例中。为什么它适用于一个细分市场而不适用于另一个细分市场？
- 是否有可能使 loadstring 不可能等于打印？卢阿
- java中的random.expovariate()
- Appscript 通过会议在 Google 日历中发送电子邮件和创建活动
- 为什么我的 Onclick 箭头功能在 React 中不起作用？
- 在此代码中是否有使用“this”的替代方法？
- 在 SQL Server 和 PostgreSQL 上查询，我如何从第一个表获得第二个表的可视化
- 每千个数字得到
- 更新了城市边界 KML 文件的来源？