flutter - 在颤振中使用最佳方法创建自定义复杂布局?
问题描述
我构建了一个布局,但我知道这不是创建此布局的好方法。所以如何获得最好的方法来创建这个布局,中间小部件的动态和对齐应该在中心。
代码:
class StartGroupChatScreen extends StatelessWidget {
double startPoint = 30;
@override
Widget build(BuildContext context) {
final size = MediaQuery.of(context).size;
return Scaffold(
appBar: AppBar(
automaticallyImplyLeading: false,
title: Row(
children: [
IconButton(
icon: Icon(
Icons.arrow_back_ios,
color: MyTheme.secondryColor,
),
onPressed: () {},
),
Text(
"GROUP CHAT",
style: TextStyle(
fontSize: 17,
fontWeight: FontWeight.bold,
color: MyTheme.secondryColor),
),
],
)),
body: Container(
color: MyTheme.grey800,
child: Stack(
children: [
InkWell(
child: Align(
alignment: Alignment.center,
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Container(
height: size.height * 0.14,
alignment: Alignment.center,
child: Stack(
children: [
Positioned(
left: startPoint,
child: UserAvatar(
imageUrl:
"https://wallpaperaccess.com/full/3957694.jpg",
avatarRadius: size.height * 0.12),
),
Positioned(
left: startPoint + 30,
child: UserAvatar(
imageUrl:
"https://m.media-amazon.com/images/M/MV5BZDA1ODgyODEtOWI3Yy00N2UzLTk5ZGMtZGI1MzU5YzFkZDQ1XkEyXkFqcGdeQXVyMTc4MzI2NQ@@._V1_UY1200_CR285,0,630,1200_AL_.jpg",
avatarRadius: size.height * 0.12),
),
Positioned(
left: startPoint + 60,
child: UserAvatar(
imageUrl:
"https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQhS1n9AgNPFrsPjj0fHqwPdIJPJLl9hXUq5Q&usqp=CAU",
avatarRadius: size.height * 0.12),
),
Positioned(
left: startPoint + 90,
child: UserAvatar(
imageUrl:
"https://img.mensxp.com/media/content/2020/Aug/Michele-Morrone-From-365-Days-Floored-Us-With-His-Fashion-Game-1200x900_5f2a761253b66_1200x900.jpeg",
avatarRadius: size.height * 0.12),
),
Positioned(
left: startPoint + 120,
child: UserAvatar(
imageUrl:
"https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcS44UpSZW-GZwDVxU3763H9HPOWqdB6ThRAoQ&usqp=CAU",
avatarRadius: size.height * 0.12),
),
Positioned(
left: startPoint + 150,
child: UserAvatar(
imageUrl:
"https://img1.nickiswift.com/img/gallery/the-untold-truth-of-michele-morrone-from-365-days/intro-1593017194.jpg",
avatarRadius: size.height * 0.12),
),
Positioned(
left: startPoint + 180,
child: UserAvatar(
imageUrl:
"https://images2.minutemediacdn.com/image/upload/c_fill,w_720,ar_16:9,f_auto,q_auto,g_auto/shape/cover/sport/Bar-Giuseppe-Red-Carpet---14th-Rome-Film-Fest-2019-7de8f118ccdbce430f2d706463c8e09c.jpg",
avatarRadius: size.height * 0.12),
),
Positioned(
left: startPoint + 210,
child: UserAvatar(
imageUrl:
"https://stat2.bollywoodhungama.in/wp-content/uploads/2021/04/Netflixs-365-Days-breakout-star-Michele-Morrone-looks-sharp-on-the-cover-of-Elle-India-..jpg",
avatarRadius: size.height * 0.12),
),
],
),
),
SizedBox(
height: size.height * 0.02,
),
Text(
"START CHAT",
style: TextStyle(
color: MyTheme.white,
fontWeight: FontWeight.bold,
fontSize: 28.0),
),
],
),
),
),
Align(
alignment: Alignment.bottomCenter,
child: InkWell(
onTap: () {},
child: Container(
height: size.height * 0.08,
alignment: Alignment.center,
decoration: BoxDecoration(
color: MyTheme.primaryColor,
),
child: Text(
"CONTINUE",
style: const TextStyle(
fontWeight: FontWeight.bold, fontSize: 17.0),
),
),
),
)
],
),
),
);
}
}
用户头像:
class UserAvatar extends StatelessWidget {
final String imageUrl;
final double avatarRadius;
const UserAvatar({Key key,@required this.imageUrl , @required this.avatarRadius}) : super(key: key);
@override
Widget build(BuildContext context) {
return Container(
height: avatarRadius,
width: avatarRadius,
decoration: BoxDecoration(
shape: BoxShape.circle,
image: DecorationImage(
image: NetworkImage(imageUrl),
fit: BoxFit.cover
)
),
);
}
}
输出:
解决方案
其实很好
但这似乎是重复的,我认为您应该添加另一个字段属性,例如图像的位置和头像半径,因为它具有相同的重复 const 值
UserAvatar(
imageUrl: "https://wallpaperaccess.com/full/3957694.jpg",
imageNo : 1,
),
),
所以小部件应该是这样的
class UserAvatar extends StatelessWidget {
final String imageUrl;
final double avatarRadius;
final int imageNo;
const UserAvatar({Key key,@required this.imageUrl , @required this.avatarRadius}) : super(key: key);
@override
Widget build(BuildContext context) {
double startPoint = 30;
final size = MediaQuery.of(context).size;
return Positioned(
left: startPoint + (30 * imageNo),
Container(
height: size.height * 0.12,
width: size.height * 0.12,
decoration: BoxDecoration(
shape: BoxShape.circle,
image: DecorationImage(
image: NetworkImage(imageUrl),
fit: BoxFit.cover
)
),
),
);
}
}
而且实际上你也可以从第 37 行到第 100 行移动表演头像的身体,因为它是常数值
推荐阅读
- javascript - 未捕获的类型错误:没有“新”就无法调用类构造函数控制器
- javascript - 当用户在输入字段中选择某些输入并单击“搜索”时,它 console.logs("hello")
- python - PyAutoGui 无法识别已安装的 OpenCV
- ios - SwiftUI 警报显示一次
- android - Android Auto 中不显示通知
- reactjs - 缩放到标记位置并从地图以外的其他视图打开 infoWindow
- ubuntu - Ubuntu16 LetsEncrypt R3 问题
- github - 分叉存储库上的原始存储库问题
- python - Mypy 在 __init__ 覆盖中接受不兼容的类型
- java - 使用R中的Tabulizer从pdf中提取表格时如何解决Java错误