gpt4 book ai didi

dart - 如何使用 dart 设计这样的用户中心 ui

转载 作者:IT王子 更新时间:2023-10-29 06:51:02 24 4
gpt4 key购买 nike

我熟悉 ColumnRow。但是我的图片示例中的复杂UI,我不知道如何开始,忽略了中文。

My example

最佳答案

这行得通吗?

enter image description here

double _appBarHeight = 120, _imageHeight = 80, _iconTopMargin = 44, _iconLeftMargin = 12, _leftMargin = 120;

@override
Widget build(BuildContext context) {
return Scaffold(
body: Stack(
children: <Widget>[
Positioned(
left: 0,
right: 0,
height: _appBarHeight,
child: Container(color: Colors.blue),
),
Positioned(
left: _iconLeftMargin,
top: _iconTopMargin,
child: Icon(Icons.settings, color: Colors.white),
),
Positioned(
right: _iconLeftMargin,
top: _iconTopMargin,
child: Icon(Icons.bubble_chart, color: Colors.white),
),
Positioned(
left: _iconLeftMargin,
top: _appBarHeight - _imageHeight / 2,
child: ClipOval(child: Image.asset("assets/images/profile.jpg", fit: BoxFit.cover, height: _imageHeight, width: _imageHeight)),
),
Positioned(
left: _leftMargin,
top: _appBarHeight - (_imageHeight / 2),
child: Text("CopsOnRoad", style: TextStyle(color: Colors.white, fontWeight: FontWeight.w500, fontSize: 18)),
),
Positioned.fill(
left: _leftMargin,
top: _appBarHeight + (_imageHeight / 4),
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: <Widget>[
Column(
children: <Widget>[
Text("2", style: TextStyle(fontWeight: FontWeight.bold)),
Text("Gold", style: TextStyle(color: Colors.grey)),
],
),
Column(
children: <Widget>[
Text("22", style: TextStyle(fontWeight: FontWeight.bold)),
Text("Silver", style: TextStyle(color: Colors.grey)),
],
),
Column(
children: <Widget>[
Text("28", style: TextStyle(fontWeight: FontWeight.bold)),
Text("Bronze", style: TextStyle(color: Colors.grey)),
],
),
Container(),
],
),
),
Positioned(
left: 0,
top: _appBarHeight + _imageHeight / 1.1,
right: 0,
height: 1,
child: Container(color: Colors.grey),
),
Positioned(
top: _appBarHeight + _imageHeight * 1.1,
child: Padding(
padding: const EdgeInsets.symmetric(horizontal: 8.0),
child: Text("Reputation", style: TextStyle(color: Colors.grey)),
),
),
Positioned.fill(
left: _leftMargin,
top: _appBarHeight + _imageHeight * 1.1,
child: Row(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
Text("This", style: TextStyle(fontWeight: FontWeight.bold)),
SizedBox(width: 10),
Container(width: 1, color: Colors.grey.withOpacity(0.4), height: 16),
SizedBox(width: 10),
Text("is", style: TextStyle(fontWeight: FontWeight.bold)),
SizedBox(width: 10),
Container(width: 1, color: Colors.grey.withOpacity(0.4), height: 16),
SizedBox(width: 10),
Text("5509", style: TextStyle(fontWeight: FontWeight.bold)),
SizedBox(width: 10),
Spacer(),
Icon(Icons.keyboard_arrow_right, color: Colors.grey)
],
),
),
],
),
);
}

关于dart - 如何使用 dart 设计这样的用户中心 ui,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/55535731/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com