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

Question

我熟悉Column和Row。但是在我的图像示例中复杂的UI，我不知道如何开始，忽略了中文单词。

Answer 1

这会有用吗？

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)
            ],
          ),
        ),
      ],
    ),
  );
}

Answer 2

您可以使用Stack小部件和Positioned元素来帮助您将头像定位在正确的位置。

关于定位和堆叠的快速视频：https://www.youtube.com/watch?v=EgtPleVwxBQ