【Flutter】地址列表界面
2021-12-24 本文已影响0人
NJ_墨
地址列表卡片样式以及空数据界面处理
主要使用：
Stack的可叠加视图（Positioned 控制底部按钮位置）；
ListView显示中间滑动卡片地址信息；
截屏2021-12-23 下午5.47.54.png
import 'package:flutter/material.dart';
import 'package:flutter_tab_demo/constant/constant_tool.dart';
//import 'package:flutter_tab_demo/http/request_api.dart';
//import 'package:flutter_tab_demo/http/request_mock.dart';
//import 'package:flutter_tab_demo/pages/routers/ccrouters.dart';
import 'package:flutter_tab_demo/util/CommonData.dart';
//import 'package:flutter_tab_demo/util/tool_toast.dart';
// import 'model/address_item_model.dart';
// 地址数据模型
class AddressItemsModel {
var addressId;
var firstName;
var lastName;
var country;
var street;
var state;
var isDefault;
var email;
var zip;
var city;
var phone;
var code;
AddressItemsModel({this.addressId,this.firstName});
AddressItemsModel.fromJson(Map<String, dynamic>? json) {
if (json != null) {
addressId = json['address_id'];
firstName = json['first_name'];
lastName = json['last_name'];
country = json['country'];
street = json['street'];
state = json['state'];
isDefault = json['is_default'];
email = json['email'];
zip = json['zip'];
city = json['city'];
phone = json['phone'];
code = json['code'];
}
}
}
class AccountAddressListPage extends StatefulWidget {
const AccountAddressListPage({Key? key}) : super(key: key);
@override
_AccountAddressListPageState createState() => _AccountAddressListPageState();
}
class _AccountAddressListPageState extends State<AccountAddressListPage> {
List<AddressItemsModel> addressList = [];
void requestAPI() async {
print('请求数据 开始');
// var _request = MockRequest();
// var requestResult = await _request.get(RequestApi.Address_List);
// var result = requestResult['result'];
//
// //第二种方式
// if (result != null && result is List) {
// addressList = result
// .map<AddressItemsModel>((item) => AddressItemsModel.fromJson(item))
// .toList();
// }
//循环创建数据, 可以把上面注释
addressList = [];
for(int i = 0; i<6; i++) {
var model = AddressItemsModel();
model.addressId = '123';
model.firstName = 'Qiang';
model.lastName = 'Da';
model.country = 'US';
model.state = 'state';
model.street = 'street';
model.email = 'email';
model.zip = 'zip';
model.city = 'city';
model.phone = 'phone';
model.code = 'code';
addressList.add(model);
}
print('数据长度:${addressList.length}');
setState(() {});
}
@override
void initState() {
// TODO: implement initState
super.initState();
requestAPI();
}
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('地址列表'),
elevation: 0,
),
body: Container(
padding: EdgeInsets.only(
left: 12,
top: 0,
right: 12,
bottom: ConstantTool.kIsAndroid ? 10 : CommonData.bottomH),
color: Color(0xFFF5F5F5),
child: Stack(
children: [
Container(
padding: EdgeInsets.only(bottom: 50),
child: ListView(
children: _addressItemsArray(),
),
),
// 底部相对位置保存按钮
Positioned(
bottom: 0,
width: CommonData.screenW - 24,
height: 45,
child: Container(
padding: EdgeInsets.all(0),
width: double.infinity,
height: 45,
decoration: BoxDecoration(
color: Colors.black,
border: Border(
top: BorderSide(width: 1, color: Colors.black26))),
child: InkWell(
child: Row(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Icon(Icons.add, color: Colors.white),
Text('增加收货地址', style: TextStyle(color: Colors.white))
],
),
onTap: () {
//CCRouters.push(context, RouteName.accountAddressEditSecPage, {});
},
),
),
)
],
),
),
);
}
_addressItemsArray() {
List<Widget> itemViews = [];
itemViews.add(SizedBox(
height: 12,
));
if (addressList.isNotEmpty) {
addressList.forEach((element) {
ListTile subItemView = ListTile(
leading: Icon(
Icons.check,
color: Colors.red,
),
title: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text(
'${element.firstName} ${element.lastName} ${element.phone}'),
SizedBox(
height: 8,
),
Text(
'${element.country} / ${element.state} / ${element.city}',
style: TextStyle(fontSize: 13, color: Color(0xFF666666)),
maxLines: 3,
),
],
),
);
var addressItemView = Container(
padding: EdgeInsets.symmetric(horizontal: 12.0, vertical: 0),
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(6.0),
color: Colors.white,
),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
SizedBox(
height: 12,
),
Row(
children: [
Icon(
Icons.my_location,
color: Colors.red,
size: 14,
),
SizedBox(
width: 4,
),
Text('${element.firstName} ${element.lastName}'),
],
),
SizedBox(
height: 4,
),
Text(
'+${element.code} ${element.phone}',
style: TextStyle(fontSize: 13, color: Color(0xFF333333)),
),
SizedBox(
height: 8,
),
Text(
'${element.country} / ${element.state} / ${element.city} \n${element.street} ',
style: TextStyle(fontSize: 13, color: Color(0xFF666666)),
maxLines: 3,
),
SizedBox(
height: 8,
),
SizedBox(
width: double.infinity,
height: 0.5,
child: Container(
color: Color(0xFFCCCCCC),
),
),
Row(
children: [
Icon(
Icons.radio_button_checked,
size: 20,
),
SizedBox(
width: 4,
),
Expanded(child: Text('Default')),
TextButton(
onPressed: () {},
style: ButtonStyle(
minimumSize: MaterialStateProperty.all(Size(50, 20)),
padding:
MaterialStateProperty.all(EdgeInsets.all(5))),
child: Icon(
Icons.delete,
color: Color(0xFF0D0D0D),
size: 20,
)),
TextButton(
onPressed: () {
//CCRouters.push(context, RouteName.accountAddressEditSecPage, {});
},
style: ButtonStyle(
minimumSize: MaterialStateProperty.all(Size(50, 20)),
padding:
MaterialStateProperty.all(EdgeInsets.all(5))),
child: Icon(
Icons.edit,
color: Color(0xFF0D0D0D),
size: 20,
))
],
)
],
),
);
itemViews.add(addressItemView);
itemViews.add(SizedBox(
height: 12,
));
});
} else {
// 临时空界面
itemViews.add(Container(
child: Column(
children: [
Text('暂无地址'),
TextButton(
onPressed: () {
//showToast('新增地址');
//CCRouters.push(context, RouteName.accountAddressEditPage, {});
},
child: Text('新增地址'))
],
),
));
}
return itemViews;
}
}
代码中几个使用的地方，可以直接用下面方法替换，
import 'dart:ffi';
import 'package:flutter/material.dart';
import 'dart:io';
class ConstantTool {
static final bool kIsAndroid = Platform.isAndroid;
}
class CommonData {
// 数据
static MediaQueryData queryData = (MediaQueryData.fromWindow(window));
// 获取屏幕size
static final Size size = (queryData.size);
// 屏幕高
static final double screenH = (size.height);
// 屏幕宽
static final double screenW = (size.width);
}
