Flutter Ui 实验室（十一）我的页面

有同学在QQ群里问类似这样的效果应该怎么做？

image.png

我们现在就来分析一下这样的效果该怎么做？主要针对 2 中间圆形图片框。 看下面的分析图

image.png

1. 红框范围是我们的整个头部
2. 绿框范围是我们的背景
3. 黄框范围是我们需要显示的圆形图片
4. 蓝框是留白部分

有了这样的分析后，怎么做就有谱了。

1. 红框 我们使用Container，并指定高度
2. 绿框 和 黄框 我们使用Stack，外面再包裹一层LayoutBuilder，做为 红框 的子Widget。这样我们就能知道父Widget 红框 的高度
3. 绿框 使用SizedBox来限定高度，黄框 使用Positioned来定位到屏幕中间

实现的效果如下图

image.png

下面就直接上代码

import 'package:flutter/material.dart';

class MyProfile extends StatefulWidget {
  @override
  _MyProfileState createState() => _MyProfileState();
}

class _MyProfileState extends State<MyProfile> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('My Profile'),
      ),
      body: Container(
        child: Column(
          children: <Widget>[
            Container(
              color: Colors.yellowAccent,
              height: 200.0,
              child: LayoutBuilder(
                builder: (BuildContext context, BoxConstraints constraints) {
                  return Stack(
                    overflow: Overflow.visible,
                    children: <Widget>[
                      SizedBox(
                        width: constraints.maxWidth,
                        height: constraints.maxHeight - 25,
                        child: Image(
                          image: AssetImage("images/bg01.jpg"),
                          fit: BoxFit.fill,
                        ),
                      ),
                      Positioned(
                        left: constraints.maxWidth / 2 - 25,
                        top: constraints.maxHeight - 50,
                        child: CircleAvatar(
                          child: Image(
                            image: AssetImage("images/head01.png"),
                            width: 50,
                            height: 50,
                          ),
                        ),
                      )
                    ],
                  );
                },
              ),
            ),
            Container(
              color: Colors.greenAccent,
              height: 300,
            )
          ],
        ),
      ),
    );
  }
}