zoukankan      html  css  js  c++  java
  • 37 Flutter仿京东商城项目 结算页面布局

    加群452892873 下载对应34课文件,运行方法,建好项目,直接替换lib目录

    CheckOut.dart

    import 'package:flutter/material.dart';
    import 'package:flutter_jdshop/services/ScreenAdapter.dart';
    
    class CheckOutPage extends StatefulWidget {
      CheckOutPage({Key key}) : super(key: key);
    
      _CheckOutPageState createState() => _CheckOutPageState();
    }
    
    class _CheckOutPageState extends State<CheckOutPage> {
      Widget _checkOutItem() {
        return Row(
          children: <Widget>[
            Container(
               ScreenAdapter.width(160),
              child: Image.network(
                  "https://www.itying.com/images/flutter/list2.jpg",
                  fit: BoxFit.cover),
            ),
            Expanded(
              flex: 1,
              child: Container(
                padding: EdgeInsets.fromLTRB(10, 10, 10, 5),
                child: Column(
                  mainAxisAlignment: MainAxisAlignment.spaceBetween,
                  crossAxisAlignment: CrossAxisAlignment.start,
                  children: <Widget>[
                    Text("华为旗舰店Mate9手机", maxLines: 2),
                    Text("白色,175", maxLines: 1),
                    Stack(
                      children: <Widget>[
                        Align(
                          alignment: Alignment.centerLeft,
                          child: Text("¥1111", style: TextStyle(color: Colors.red)),
                        ),
                        Align(
                          alignment: Alignment.centerRight,
                          child: Text('x2'),
                        )
                      ],
                    )
                  ],
                ),
              ),
            )
          ],
        );
      }
    
      @override
      Widget build(BuildContext context) {
        return Scaffold(
            appBar: AppBar(
              title: Text('结算'),
            ),
            body: Stack(
              children: <Widget>[
                ListView(
                  children: <Widget>[
                    Container(
                      color: Colors.white,
                      child: Column(
                        children: <Widget>[
                          ListTile(
                            leading: Icon(Icons.add_location),
                            title: Center(child: Text("请添加收货地址")),
                            trailing: Icon(Icons.navigate_next),
                          ),
                          SizedBox(height: 10),
                          ListTile(
                            leading: Icon(Icons.add_location),
                            title: Column(
                              crossAxisAlignment: CrossAxisAlignment.start,
                              children: <Widget>[
                                Text('张三 13325187796'),
                                SizedBox(height: 10),
                                Text('北京海淀区')
                              ],
                            ),
                            trailing: Icon(Icons.navigate_next),
                          ),
                          SizedBox(height: 10),
                        ],
                      ),
                    ),
                    SizedBox(height: 20),
                    Container(
                      color: Colors.white,
                      padding: EdgeInsets.all(ScreenAdapter.width(20)),
                      child: Column(
                        children: <Widget>[
                          _checkOutItem(),
                          Divider(),
                          _checkOutItem(),
                          Divider(),
                          _checkOutItem()
                        ],
                      ),
                    ),
                    Container(
                      color: Colors.white,
                      padding: EdgeInsets.all(ScreenAdapter.width(20)),
                      child: Column(
                        crossAxisAlignment: CrossAxisAlignment.start,
                        children: <Widget>[
                          Text('商品总金额¥100'),
                          Divider(),
                          Text('立减:¥5'),
                          Divider(),
                          Text('运费:¥8')
                        ],
                      ),
                    )
                  ],
                ),
                Positioned(
                  bottom: 0,
                   ScreenAdapter.width(750),
                  height: ScreenAdapter.height(100),
                  child: Container(
                     ScreenAdapter.width(750),
                    height: ScreenAdapter.height(100),
                    decoration: BoxDecoration(
                        color: Colors.white,
                        border: Border(
                            top: BorderSide( 1, color: Colors.black26))),
                    child: Stack(
                      children: <Widget>[
                        Align(
                          alignment: Alignment.centerLeft,
                          child:
                              Text("总价:140", style: TextStyle(color: Colors.red)),
                        ),
                        Align(
                          alignment: Alignment.centerRight,
                          child: RaisedButton(
                            child:
                                Text("立即下单", style: TextStyle(color: Colors.white)),
                            color: Colors.red,
                            onPressed: () {},
                          ),
                        )
                      ],
                    ),
                  ),
                )
              ],
            ));
      }
    }

  • 相关阅读:
    有一天人人都会变成程序猿
    mysql 假设存在id则设数据自添加1 ,不存在则加入。java月份计算比較
    做程序员的老婆应该注意的一些事情
    人类科技的发展为什么会是加速度的(TRIZ方法再推荐)
    Unity5.0 RPG角色扮演历险类游戏之 森林历险记
    linux目录对照命令——meld
    iOS --- [持续更新中] iOS移动开发中的优质资源
    【spring bean】spring中bean的懒加载和depends-on属性设置
    【spring bean】 spring中bean之间的引用以及内部bean
    【spring set注入 注入集合】 使用set注入的方式注入List集合和Map集合/将一个bean注入另一个Bean
  • 原文地址:https://www.cnblogs.com/yiweiyihang/p/11546600.html
Copyright © 2011-2022 走看看