flutter9 商品详情顶部tab切换顶部下拉菜单底部浮动导航

最新推荐文章于 2023-11-24 09:32:54 发布

weixin_38107457

最新推荐文章于 2023-11-24 09:32:54 发布

阅读量811

点赞数

分类专栏： flutter 文章标签： flutter android android studio

本文链接：https://blog.csdn.net/weixin_38107457/article/details/123140742

版权

本文介绍了如何使用Flutter构建商品详情页面的顶部Tab切换效果和底部下拉菜单功能，详细讲解了相关组件的使用及交互实现，适用于Android和iOS平台的开发。

摘要由CSDN通过智能技术生成

import 'package:flutter/material.dart';
import 'package:fultter/flutter_jdshop/pages/ProductContent/ProductContentFirst.dart';
import 'package:fultter/flutter_jdshop/pages/ProductContent/ProductContentSecond.dart';
import 'package:fultter/flutter_jdshop/pages/ProductContent/ProductContentThird.dart';
import 'package:fultter/flutter_jdshop/services/ScreenAdaper.dart';

class ProductContentPage extends StatefulWidget {
  final Map arguments;
  const ProductContentPage({Key? key,required this.arguments}) : super(key: key);

  @override
  _ProductContentPageState createState() => _ProductContentPageState();
}

class _ProductContentPageState extends State<ProductContentPage> {
  @override
  Widget build(BuildContext context) {
    return DefaultTabController(
        length: 3,
        child: Scaffold(
          appBar: AppBar(
            title: Row(
              mainAxisAlignment: MainAxisAlignment.center,
              children: <Widget>[
                Container(
                  width: ScreenAdaper.width(400),
                  child: TabBar(
                    indicatorColor: Colors.red,
                    indicatorSize: TabBarIndicatorSize.label,
                    tabs: [
                      Tab(
                        child: Text('商品'),
                      ),
                      Tab(
                        child: Text('详情'),
                      ),
                      Tab(
                        child: Text('评价'),
                      ),
                    ],
                  ),
                  
                )
              ],
            ),
            actions: [
              IconButton(
                  icon: Icon(Icons.more_horiz),
                  onPressed: (){
                    showMenu(
                        context: context,
                        position: RelativeRect.fromLTRB(ScreenAdaper.width(600), 76, 10, 0),
                        items: [
                          PopupMenuItem(
                              child: Row(
                                children: [
                                  Icon(Icons.home),
                                  Text("首页")
                                ],
                              )
                          ),
                          PopupMenuItem(
                              child: Row(
                                children: [
                                  Icon(Icons.search),
                                  Text("搜索")
                                ],
                              )
                          )
                        ]
                    );
                  },
                  )
            ],
          ),
          body: Stack(
            children: [
              TabBarView(
                  children: [
                    ProductContentFirst(),
                    ProductContentSecond(),
                    ProductContentThird(),
                  ]
              ),
              Positioned(
                  width: ScreenAdaper.width(750),
                  height: ScreenAdaper.height(80),
                  bottom: 0,
                  child:Container(
                    color: Colors.red,
                    child: Text("底部"),
                  ) 
              )
            ],
          ),
        ));
  }
}

ProductContentFirst.dart

import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:fultter/flutter_jdshop/services/ScreenAdaper.dart';

class ProductContentFirst extends StatefulWidget {
  const ProductContentFirst({Key? key}) : super(key: key);

  @override
  _ProductContentFirstState createState() => _ProductContentFirstState();
}

class _ProductContentFirstState extends State<ProductContentFirst> {
  @override
  Widget build(BuildContext context) {
    return