个人中心头像布局方法

效果如上:

import 'package:flutter/material.dart';

class testPage extends StatefulWidget {
  testPage({Key key}) : super(key: key);

  _testPageState createState() => _testPageState();
}

class _testPageState extends State<testPage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(title: Text('测试页面')),
        body: Column(
          children: <Widget>[
            //头像居中处理:
            Stack(
              alignment: Alignment.center,
              children: <Widget>[
                Container(height: 200, color: Colors.red),
                Positioned(
                  top: 40.0,
                  child: CircleAvatar(
                    radius: 60,
                    backgroundImage: NetworkImage(
                        "https://pic2.zhimg.com/v2-639b49f2f6578eabddc458b84eb3c6a1.jpg"),
                  ),
                ),
              ],
            ),
            Container(
              height: 200,
              color: Colors.blue
            )
          ],
        ));
  }
}

 

posted @ 2019-10-15 16:46  生如逆旅,一苇以航  阅读(546)  评论(0编辑  收藏  举报