Flutter-防京东商城项目-编写选择弹框界面-20

冯汉栩

已于 2024-03-07 10:42:18 修改

阅读量108

点赞数

分类专栏： Flutter 文章标签： flutter html

于 2021-09-04 13:22:42 首次发布

本文链接：https://blog.csdn.net/weixin_38716347/article/details/120098645

版权

Flutter 专栏收录该内容

47 篇文章 10 订阅

订阅专栏

一直觉得自己写的不是技术，而是情怀，一个个的教程是自己这一路走来的痕迹。靠专业技能的成功是最具可复制性的，希望我的这条路能让你们少走弯路，希望我能帮你们抹去知识的蒙尘，希望我能帮你们理清知识的脉络，希望未来技术之巅上有你们也有我。

代码文档

Flutter防京东商城源码(1-10)链接

Flutter防京东商城源码(11-20)链接

Flutter防京东商城源码(21-30)链接

Flutter防京东商城源码(31-46)链接

效果：
请添加图片描述

设计图
在这里插入图片描述

本章学习目标
1.编写选择弹框界面

写完之后iphone刘海屏没有预留底部安全距离的问题先不解决。

1.代码写在详情页面商品第一页（ProductContentFirst）.

导入

import '../../widget/JDButton.dart';

_attrBottomSheet() {
  showModalBottomSheet(
      context: context,
      builder: (contex) {
        return GestureDetector(
          //解决showModalBottomSheet点击消失的问题
          onTap: () {
            return false;
          },
          child: Stack(
            children: <Widget>[
              Container(
                padding: EdgeInsets.all(ScreenAdaper.width(20)),
                child: ListView(
                  children: <Widget>[
                    Column(
                      mainAxisAlignment: MainAxisAlignment.center,
                      children: <Widget>[
                        Wrap(
                          children: <Widget>[
                            Container(
                              width: ScreenAdaper.width(100),
                              child: Padding(
                                padding: EdgeInsets.only(
                                    top: ScreenAdaper.height(22)),
                                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),
                                    ),
                                  ),
                                ],
                              ),
                            )
                          ],
                        ),
                        Wrap(
                          children: <Widget>[
                            Container(
                              width: ScreenAdaper.width(100),
                              child: Padding(
                                padding: EdgeInsets.only(
                                    top: ScreenAdaper.height(22)),
                                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),
                                    ),
                                  ),
                                  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),
                                    ),
                                  ),
                                ],
                              ),
                            )
                          ],
                        ),
                        Wrap(
                          children: <Widget>[
                            Container(
                              width: ScreenAdaper.width(100),
                              child: Padding(
                                padding: EdgeInsets.only(
                                    top: ScreenAdaper.height(22)),
                                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>[
                    Expanded(
                      flex: 1,
                      child: Container(
                        margin: EdgeInsets.fromLTRB(10, 0, 0, 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('立即购买');
                            },
                          )),
                    )
                  ],
                ),
              )
            ],
          ),
        );
      });
}

2.调用上面写好的方法，筛选添加点击方法

在这里插入图片描述

//筛选
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，黑色，XL，1件")
      ],
    ),
  ),
),