20 Flutter仿京东商城项目 商品详情 底部弹出筛选属性  以及筛选属性页面布局-LMLPHP

ProductContentFirst.dart

import 'package:flutter/material.dart';
import '../../widget/JdButton.dart';
import '../../services/ScreenAdaper.dart'; class ProductContentFirst extends StatefulWidget {
ProductContentFirst({Key key}) : super(key: key); _ProductContentFirstState createState() => _ProductContentFirstState();
} class _ProductContentFirstState extends State<ProductContentFirst> {
_attrBottomSheet() {
showModalBottomSheet(
context: context,
builder: (context) {
return GestureDetector(
//Gesture:手势 Detector:探测器
onTap: () {
return false;
},
child: Stack(
children: <Widget>[
Container(
padding: EdgeInsets.all(ScreenAdaper.width()),
child: ListView(
children: <Widget>[
Column(
children: <Widget>[
Wrap(
children: <Widget>[
Container(
width: ScreenAdaper.width(),
child: Padding(
padding: EdgeInsets.only(
top: ScreenAdaper.height()),
child: Text('颜色',
style: TextStyle(
fontWeight: FontWeight.bold)),
),
),
Container(
width: ScreenAdaper.width(),
child: Wrap(
children: <Widget>[
Container(
margin: EdgeInsets.all(),
child: Chip(
label: Text('白色'),
padding: EdgeInsets.all(),
),
),
Container(
margin: EdgeInsets.all(),
child: Chip(
label: Text('白色'),
padding: EdgeInsets.all(),
),
),
Container(
margin: EdgeInsets.all(),
child: Chip(
label: Text('白色'),
padding: EdgeInsets.all(),
),
),
],
),
)
],
),
],
)
],
),
),
Positioned(
bottom: ,
width: ScreenAdaper.width(),
height: ScreenAdaper.height(),
child: Row(
children: <Widget>[
Container(
width: ScreenAdaper.width(),
height: ScreenAdaper.height(),
child: Row(
children: <Widget>[
Expanded(
flex: ,
child: Container(
margin: EdgeInsets.fromLTRB(,,,),
child: JdButton(
color: Color.fromRGBO(, , , 0.9),
text: "加入购物车",
cb: () {
print('加入购物车');
},
),
),
),
Expanded(
flex: ,
child: Container(
margin: EdgeInsets.fromLTRB(,,,),
child: JdButton(
color: Color.fromRGBO(, , , 0.9),
text: "立即购物",
cb: () {
print('立即购物');
},
),
)
)
],
))
],
),
)
],
));
});
} @override
Widget build(BuildContext context) {
return Container(
padding: EdgeInsets.all(),
child: ListView(
children: <Widget>[
AspectRatio(
aspectRatio: / ,
child: Image.network(
"https://www.itying.com/images/flutter/p1.jpg",
fit: BoxFit.cover,
)),
Container(
padding: EdgeInsets.only(top: ),
child: Text(
"联想ThinkPad联想ThinkPad联想ThinkPad联想ThinkPad联想ThinkPad联想ThinkPad联想ThinkPad",
style: TextStyle(
color: Colors.black87, fontSize: ScreenAdaper.size())),
),
Container(
padding: EdgeInsets.only(top: ),
child: Text(
"联想ThinkPad联想ThinkPad联想ThinkPad联想ThinkPad联想ThinkPad联想ThinkPad联想ThinkPad",
style: TextStyle(
color: Colors.black54, fontSize: ScreenAdaper.size())),
),
Container(
padding: EdgeInsets.only(top: ),
child: Row(
children: <Widget>[
Expanded(
flex: ,
child: Row(
children: <Widget>[
Text('特价'),
Text('¥28',
style: TextStyle(
color: Colors.red,
fontSize: ScreenAdaper.size()))
],
),
),
Expanded(
flex: ,
child: Row(
mainAxisAlignment: MainAxisAlignment.end,
children: <Widget>[
Text('原价'),
Text('¥50',
style: TextStyle(
color: Colors.black38,
fontSize: ScreenAdaper.size(),
decoration: TextDecoration.lineThrough))
],
),
)
],
),
),
//筛选:
Container(
margin: EdgeInsets.only(top: ),
height: ScreenAdaper.height(),
child: InkWell(
onTap: () {
_attrBottomSheet();
},
child: Row(
children: <Widget>[
Text('已选', style: TextStyle(fontWeight: FontWeight.bold)),
Text('115,黑色')
],
),
)),
Divider(),
Container(
height: ScreenAdaper.height(),
child: Row(
children: <Widget>[
Text('运费', style: TextStyle(fontWeight: FontWeight.bold)),
Text('免运费')
],
),
),
Divider()
],
));
}
}
05-11 11:15