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

￡神魔★判官ぃ 2023-08-17 15:59 129阅读 0赞

![1057166-20190904215753433-71114623.png][]

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()
              ],
            ));
      }
    }

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

[1057166-20190904215753433-71114623.png]: /images/20230810/a0c42bb218c04b528a53a4ddc825d670.png