Flutter實戰視頻-移動電商-64.會員中心_頂部頭像UI佈局

64.會員中心_頂部頭像UI佈局

會員中心的樣式

member.dart

清除原來的代碼生成一個基本的結構

默認返回一個scaffold腳手架工具，body裏面佈局使用ListView，這樣不會出現縱向的溢出

這樣就是一個基本的結構

頭部的佈局

這裏的背景顏色是一個圖片。這裏咱們先不用圖片，先使用亮粉色，找圖片比較麻煩

頭像從網上隨便找一個圖片當頭像就能夠了

http://blogimages.jspang.com/blogtouxiang1.jpg

效果預覽

 

最終代碼

 

import 'package:flutter/material.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';

class MemberPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('會員中心'),
      ),
      body: ListView(
        children: <Widget>[
          _topHeader()
        ],
      ),
    );
  }

  Widget _topHeader(){
    return Container(
      width: ScreenUtil().setWidth(750),
      padding: EdgeInsets.all(20),
      color: Colors.pinkAccent,//亮粉色
      child: Column(
        children: <Widget>[
          Container(
            margin: EdgeInsets.only(top: 30),
            child: ClipOval(//圓形的頭像
              child: Image.network('http://blogimages.jspang.com/blogtouxiang1.jpg'),
            ),
          ),
          //頭像下面的文字，爲了好看也是嵌套一個Container
          Container(
            margin: EdgeInsets.only(top: 10),
            child: Text(
              '技術胖',
              style: TextStyle(
                fontSize: ScreenUtil().setSp(36),
                color: Colors.black54
              )
            ),
          )
        ],
      ),
    );
  }
}