32Flutter仿京东商城项目用户中心页面布局

系统管理员 2023-08-17 15:59 77阅读 0赞

import 'package:flutter/material.dart';
    import 'package:flutter_jdshop/services/ScreenAdapter.dart';
    
    class UserPage extends StatefulWidget {
      UserPage({Key key}) : super(key: key);
    
      _UserPageState createState() => _UserPageState();
    }
    
    class _UserPageState extends State<UserPage> {
      @override
      Widget build(BuildContext context) {
        return Scaffold(
          appBar: AppBar(
            title: Text("用户中心"),
          ),
          body: ListView(
            children: <Widget>[
              Container(
                height: ScreenAdapter.height(220),
                width: double.infinity,
                decoration: BoxDecoration(
                    image: DecorationImage(
                        image: AssetImage('images/user_bg.jpg'),
                        fit: BoxFit.cover)),
                child: Row(
                  children: <Widget>[
                    Container(
                      margin: EdgeInsets.fromLTRB(10, 0, 10, 0),
                      child: ClipOval(
                        child: Image.asset(
                          'images/user.png',
                          fit: BoxFit.cover,
                          width: ScreenAdapter.width(100),
                          height: ScreenAdapter.width(100),
                        ),
                      ),
                    ),
                    // Expanded(
                    //   flex: 1,
                    //   child: Text('登录/注册',style: TextStyle(
                    //     color: Colors.white
                    //   )),
                    // )
                    Expanded(
                      flex: 1,
                      child: Column(
                        mainAxisAlignment: MainAxisAlignment.center,
                        crossAxisAlignment: CrossAxisAlignment.start,
                        children: <Widget>[
                          Text("用户名:123456789",
                              style: TextStyle(
                                  color: Colors.white,
                                  fontSize: ScreenAdapter.size(32))),
                          Text("普通会员",
                              style: TextStyle(
                                  color: Colors.white,
                                  fontSize: ScreenAdapter.size(32)))
                        ],
                      ),
                    )
                  ],
                ),
              ),
              ListTile(
                  leading: Icon(Icons.home, color: Colors.red), title: Text('首页')),
              Divider(),
              ListTile(leading: Icon(Icons.home), title: Text('首页')),
              ListTile(leading: Icon(Icons.home), title: Text('首页')),
              ListTile(leading: Icon(Icons.home), title: Text('首页'))
            ],
          ),
        );
      }
    }

pubspec.yaml

assets:
       - images/user_bg.jpg
       - images/2.0x/user_bg.jpg
       - images/3.0x/user_bg.jpg
       - images/user.png
       - images/2.0x/user.png
       - images/3.0x/user.png

转载于:https://www.cnblogs.com/yiweiyihang/p/11509852.html