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

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(20)),
                    child: ListView(
                      children: <Widget>[
                        Column(
                          children: <Widget>[
                            Wrap(
                              children: <Widget>[
                                Container(
                                  width: ScreenAdaper.width(100),
                                  child: Padding(
                                    padding: EdgeInsets.only(
                                        top: ScreenAdaper.height(35)),
                                    child: Text('颜色',
                                        style: TextStyle(
                                            fontWeight: FontWeight.bold)),
                                  ),
                                ),
                                Container(
                                  width: ScreenAdaper.width(610),
                                  child: Wrap(
                                    children: <Widget>[
                                      Container(
                                        margin: EdgeInsets.all(10),
                                        child: Chip(
                                          label: Text('白色'),
                                          padding: EdgeInsets.all(10),
                                        ),
                                      ),
                                      Container(
                                        margin: EdgeInsets.all(10),
                                        child: Chip(
                                          label: Text('白色'),
                                          padding: EdgeInsets.all(10),
                                        ),
                                      ),
                                      Container(
                                        margin: EdgeInsets.all(10),
                                        child: Chip(
                                          label: Text('白色'),
                                          padding: EdgeInsets.all(10),
                                        ),
                                      ),
                                    ],
                                  ),
                                )
                              ],
                            ),
                          ],
                        )
                      ],
                    ),
                  ),
                  Positioned(
                    bottom: 0,
                    width: ScreenAdaper.width(750),
                    height: ScreenAdaper.height(76),
                    child: Row(
                      children: <Widget>[
                        Container(
                            width: ScreenAdaper.width(750),
                            height: ScreenAdaper.height(76),
                            child: Row(
                              children: <Widget>[
                                Expanded(
                                  flex: 1,
                                  child: Container(
                                    margin: EdgeInsets.fromLTRB(10,0,10,0),
                                    child: JdButton(
                                      color: Color.fromRGBO(253, 1, 0, 0.9),
                                      text: "加入购物车",
                                      cb: () {
                                        print('加入购物车');
                                      },
                                    ),
                                  ),
                                ),
                                Expanded(
                                  flex: 1,
                                  child: Container(
                                    margin: EdgeInsets.fromLTRB(10,0,10,0),
                                    child: JdButton(
                                      color: Color.fromRGBO(255, 165, 0, 0.9),
                                      text: "立即购物",
                                      cb: () {
                                        print('立即购物');
                                      },
                                    ),
                                  )
                                )
                              ],
                            ))
                      ],
                    ),
                  )
                ],
              ));
        });
  }

  @override
  Widget build(BuildContext context) {
    return Container(
        padding: EdgeInsets.all(10),
        child: ListView(
          children: <Widget>[
            AspectRatio(
                aspectRatio: 16 / 9,
                child: Image.network(
                  "https://www.itying.com/images/flutter/p1.jpg",
                  fit: BoxFit.cover,
                )),
            Container(
              padding: EdgeInsets.only(top: 10),
              child: Text(
                  "联想ThinkPad联想ThinkPad联想ThinkPad联想ThinkPad联想ThinkPad联想ThinkPad联想ThinkPad",
                  style: TextStyle(
                      color: Colors.black87, fontSize: ScreenAdaper.size(36))),
            ),
            Container(
              padding: EdgeInsets.only(top: 10),
              child: Text(
                  "联想ThinkPad联想ThinkPad联想ThinkPad联想ThinkPad联想ThinkPad联想ThinkPad联想ThinkPad",
                  style: TextStyle(
                      color: Colors.black54, fontSize: ScreenAdaper.size(28))),
            ),
            Container(
              padding: EdgeInsets.only(top: 10),
              child: Row(
                children: <Widget>[
                  Expanded(
                    flex: 1,
                    child: Row(
                      children: <Widget>[
                        Text('特价'),
                        Text('￥28',
                            style: TextStyle(
                                color: Colors.red,
                                fontSize: ScreenAdaper.size(46)))
                      ],
                    ),
                  ),
                  Expanded(
                    flex: 1,
                    child: Row(
                      mainAxisAlignment: MainAxisAlignment.end,
                      children: <Widget>[
                        Text('原价'),
                        Text('￥50',
                            style: TextStyle(
                                color: Colors.black38,
                                fontSize: ScreenAdaper.size(28),
                                decoration: TextDecoration.lineThrough))
                      ],
                    ),
                  )
                ],
              ),
            ),
            //筛选：
            Container(
                margin: EdgeInsets.only(top: 10),
                height: ScreenAdaper.height(80),
                child: InkWell(
                  onTap: () {
                    _attrBottomSheet();
                  },
                  child: Row(
                    children: <Widget>[
                      Text('已选', style: TextStyle(fontWeight: FontWeight.bold)),
                      Text('115,黑色')
                    ],
                  ),
                )),
            Divider(),
            Container(
              height: ScreenAdaper.height(80),
              child: Row(
                children: <Widget>[
                  Text('运费', style: TextStyle(fontWeight: FontWeight.bold)),
                  Text('免运费')
                ],
              ),
            ),
            Divider()
          ],
        ));
  }
}