Flutter UI 我的界面

效果圖

新增
增加了網(wǎng)絡(luò)請求

待優(yōu)化:
1茂蚓、不能滾動
2胸懈、topView背景圖片滾動時有動畫效果
3交汤、界面跳轉(zhuǎn)
4雏赦、顏色值和效果圖對不上(值一樣,但是效果不一樣)

import 'package:flutter/material.dart';
import 'package:ly_app/Routes.dart';
import 'package:ly_app/net/PXRequest.dart';
import 'package:ly_app/Model/UserInfo.dart';

class MinePage extends StatelessWidget {
  var parentContext;
  MinePage(this.parentContext);

  @override
  Widget build(BuildContext context) {

    return new MaterialApp(
      title: 'LY',
      routes: <String, WidgetBuilder>{
//        "/routes":(BuildContext context) => new Routes(),
      },
      home: new MinePageWidget(parentContext),
    );
  }

  void greet(String message) {
    if (message!=null) {

    }
  }
}

class MinePageWidget extends StatefulWidget {
  var parentContext;
  MinePageWidget(this.parentContext);

  _PageState createState() => _PageState();
}

class _PageState extends State<MinePageWidget> with AutomaticKeepAliveClientMixin {
  @override
  bool get wantKeepAlive => true;
  UserInfo _userInfo;

  void _requestData() async {
    UserInfo userInfo = await PXRequest.px_getuser();
    print(userInfo.userName);
    setState(() {
      _userInfo = userInfo;
    });
  }

  @override
  void initState() {
    super.initState();
    _requestData();
  }

    Widget _cell(int row, IconData iconData, String title, String describe, bool isShowBottomLine) {
    return GestureDetector(
      onTap: () {
        switch (row) {
          case 0:
            print("$row -- $title");
            break;
          case 1:
            print("$row -- $title");
            break;
          case 2:
            print("$row -- $title");
            break;
          case 3:
            print("$row -- $title");
            break;
          case 4:
            print("$row -- $title");
            break;
          case 5:
            print("$row -- $title");
            break;
          case 6:
            print("$row -- $title");
            break;
        }
      },
      child: new Container(
        color: Color(0xFF191919),
        height: 50.0,
        child: new Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: <Widget>[
            new Container(
                margin: new EdgeInsets.all(0.0),
                height: (isShowBottomLine ? 49.0 : 50.0),
                child: new Row(
                    mainAxisAlignment: MainAxisAlignment.spaceBetween,
                    children: <Widget>[
                      new Container(
                        margin: new EdgeInsets.only(left: 15.0),
                        child: new Row(
                          children: <Widget>[
                            new Icon(iconData, color: Colors.brown),
                            new Container(
                              margin: new EdgeInsets.only(left: 15.0),
                              child: new Text(title, style: TextStyle(color: Color(0xFF777777), fontSize: 16.0)),
                            )
                          ],
                        ),
                      ),
                      new Container(
                        child: new Row(
                          children: <Widget>[
                            new Text(describe, style: TextStyle(color: Color(0xFFD5A670), fontSize: 14.0)),
                            new Icon(Icons.keyboard_arrow_right, color: Color(0xFF777777)),
                          ],
                        ),
                      ),
                    ]
                )
            ),

            _bottomLine(isShowBottomLine),

          ],
        ),
      ),
    );
  }

  Widget _bottomLine(bool isShowBottomLine) {
    if (isShowBottomLine) {
     return new Container(
          margin: new EdgeInsets.all(0.0),
          child: new Divider(
              height: 1.0,
              color: Colors.black
          ),
          padding: EdgeInsets.only(left: 15.0, right: 15.0)
      );
    }
    return Container();
  }

  Widget _spaceView() {
    return Container(
      height: 10.0,
      color: Colors.black,
    );
  }

  Widget _topView(String name, String phone) {
    return new GestureDetector(
      onTap: () {
        print("修改頭像芙扎、姓名星岗、電話");
      },
      child: new Container(
        height: 180.0,
        color: Colors.black,
        child: new Column(
          crossAxisAlignment: CrossAxisAlignment.end,
          children: <Widget>[
            new Container(
              height: 40.0,
              width: 40.0,
              alignment: Alignment.center,
              margin: new EdgeInsets.only(right: 20.0, top: 10.0),
              child: new IconButton(
                  iconSize: 20.0,
                  icon: new Icon(Icons.new_releases, color: Colors.white),
                  onPressed: () {
                    print("查看消息");
                  }),
            ),
            new Container(
              height: 90.0,
              margin: new EdgeInsets.only(top: 20.0),
//              color: Colors.yellow,
              child: new Row(
                mainAxisAlignment: MainAxisAlignment.start,
                children: <Widget>[
                  new Container(
                      padding: new EdgeInsets.only(left: 15.0),
                      child: new Card(
                        shape: new RoundedRectangleBorder(
                            borderRadius: BorderRadius.all(new Radius.circular(35.0))
                        ),
                        child: new Image.asset("images/icon_tabbar_mine_normal.png", height: 70.0, width: 70.0),
                      )
                  ),
                  new Container(
                    margin: new EdgeInsets.only(left: 8.0, top: 25.0),
                    child: new Column(
                      crossAxisAlignment: CrossAxisAlignment.start,
                      children: <Widget>[
                        new Text((_userInfo == null) ? "" : _userInfo.userName, style: TextStyle(color: Color(0xFF777777), fontSize: 18.0), textAlign: TextAlign.left),
                        new Text((_userInfo == null) ? "" : _userInfo.mobile, style: TextStyle(color: Color(0xFF555555), fontSize: 12.0), textAlign: TextAlign.left)
                      ],
                    ),
                  ),
                  new Container(
                    child: new Icon(Icons.keyboard_arrow_right, color: Color(0xFF777777)),
                    margin: new EdgeInsets.only(left: MediaQuery.of(context).size.width/ 2 - 15.0),
                  )
                ],
              ),
            )
          ],
        ),
      ),
    );
  }

  @override
  Widget build(BuildContext context) {
    return new Material(
      child: new Container(
        color: Colors.black,
        height: MediaQuery.of(context).size.height,
        child: new ListView.builder(
          physics: new AlwaysScrollableScrollPhysics(),
          itemBuilder: (context, index) {
            if (index == 0) {
              return _topView("陰天不尿尿", "13146218612");
            } else if (index == 1) {
              return _cell(index, Icons.list, "我的專屬顧問", (_userInfo == null) ? "" : (_userInfo.advisorName == null ? "" : _userInfo.advisorName), true);
            } else if (index == 2) {
              return _cell(index, Icons.card_membership, "銀行卡", "", true);
            }  else if (index == 3) {
              return _cell(index, Icons.title, "風(fēng)險評測", "", false);
            } else if (index == 4) {
              return _spaceView();
            } else if (index == 5) {
              return _cell(index, Icons.help, "幫助說明", "", true);
            }  else if (index == 6) {
              return _cell(index, Icons.settings, "設(shè)置", "", false);
            } else {
              return new Container(
                height: MediaQuery.of(context).size.height,
                color: Colors.black,
              );
            }
          },
          itemCount: 6 + 1,
        ),
      ),
    );
  }
}

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末,一起剝皮案震驚了整個濱河市戒洼,隨后出現(xiàn)的幾起案子俏橘,更是在濱河造成了極大的恐慌,老刑警劉巖圈浇,帶你破解...
    沈念sama閱讀 217,185評論 6 503
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件寥掐,死亡現(xiàn)場離奇詭異,居然都是意外死亡磷蜀,警方通過查閱死者的電腦和手機召耘,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 92,652評論 3 393
  • 文/潘曉璐 我一進店門,熙熙樓的掌柜王于貴愁眉苦臉地迎上來褐隆,“玉大人污它,你說我怎么就攤上這事。” “怎么了衫贬?”我有些...
    開封第一講書人閱讀 163,524評論 0 353
  • 文/不壞的土叔 我叫張陵蜜宪,是天一觀的道長。 經(jīng)常有香客問我祥山,道長圃验,這世上最難降的妖魔是什么? 我笑而不...
    開封第一講書人閱讀 58,339評論 1 293
  • 正文 為了忘掉前任缝呕,我火速辦了婚禮澳窑,結(jié)果婚禮上,老公的妹妹穿的比我還像新娘供常。我一直安慰自己摊聋,他們只是感情好,可當(dāng)我...
    茶點故事閱讀 67,387評論 6 391
  • 文/花漫 我一把揭開白布栈暇。 她就那樣靜靜地躺著麻裁,像睡著了一般。 火紅的嫁衣襯著肌膚如雪源祈。 梳的紋絲不亂的頭發(fā)上煎源,一...
    開封第一講書人閱讀 51,287評論 1 301
  • 那天,我揣著相機與錄音香缺,去河邊找鬼手销。 笑死,一個胖子當(dāng)著我的面吹牛图张,可吹牛的內(nèi)容都是我干的锋拖。 我是一名探鬼主播,決...
    沈念sama閱讀 40,130評論 3 418
  • 文/蒼蘭香墨 我猛地睜開眼祸轮,長吁一口氣:“原來是場噩夢啊……” “哼兽埃!你這毒婦竟也來了?” 一聲冷哼從身側(cè)響起适袜,我...
    開封第一講書人閱讀 38,985評論 0 275
  • 序言:老撾萬榮一對情侶失蹤柄错,失蹤者是張志新(化名)和其女友劉穎,沒想到半個月后痪蝇,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體鄙陡,經(jīng)...
    沈念sama閱讀 45,420評論 1 313
  • 正文 獨居荒郊野嶺守林人離奇死亡冕房,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點故事閱讀 37,617評論 3 334
  • 正文 我和宋清朗相戀三年躏啰,在試婚紗的時候發(fā)現(xiàn)自己被綠了。 大學(xué)時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片耙册。...
    茶點故事閱讀 39,779評論 1 348
  • 序言:一個原本活蹦亂跳的男人離奇死亡给僵,死狀恐怖,靈堂內(nèi)的尸體忽然破棺而出,到底是詐尸還是另有隱情帝际,我是刑警寧澤蔓同,帶...
    沈念sama閱讀 35,477評論 5 345
  • 正文 年R本政府宣布,位于F島的核電站蹲诀,受9級特大地震影響斑粱,放射性物質(zhì)發(fā)生泄漏。R本人自食惡果不足惜脯爪,卻給世界環(huán)境...
    茶點故事閱讀 41,088評論 3 328
  • 文/蒙蒙 一则北、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧痕慢,春花似錦尚揣、人聲如沸。這莊子的主人今日做“春日...
    開封第一講書人閱讀 31,716評論 0 22
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽。三九已至塔次,卻和暖如春方篮,著一層夾襖步出監(jiān)牢的瞬間,已是汗流浹背励负。 一陣腳步聲響...
    開封第一講書人閱讀 32,857評論 1 269
  • 我被黑心中介騙來泰國打工恭取, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留,地道東北人熄守。 一個月前我還...
    沈念sama閱讀 47,876評論 2 370
  • 正文 我出身青樓蜈垮,卻偏偏與公主長得像,于是被迫代替她去往敵國和親裕照。 傳聞我的和親對象是個殘疾皇子攒发,可洞房花燭夜當(dāng)晚...
    茶點故事閱讀 44,700評論 2 354

推薦閱讀更多精彩內(nèi)容