douyin_demo/lib/pages/recommend_page.dart

import 'package:douyin_demo/providers/recommend_provider.dart';
import 'package:douyin_demo/views/bottom_safebar.dart';
import 'package:douyin_demo/views/main_tab_view.dart';
import 'package:flutter/material.dart';
import 'package:provider/provider.dart';

/// Description: 推荐界面
/// Time       : 04/02/2022 星期六
/// Author     : liuyuqi.gov@msn.cn
class RecommendPage extends StatelessWidget {
  final int selIndex;

  const RecommendPage({Key? key, required this.selIndex}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    double rpx = MediaQuery.of(context).size.width / 750;

    return MultiProvider(
        providers: [
          ChangeNotifierProvider(
                create: (BuildContext context) {
              return RecommendProvider();
            },
          )
        ],
        child: Scaffold(
          resizeToAvoidBottomInset: false,
          body: Stack(children: [
            // 关注、推荐tab
            MainTabView(),
            Positioned(
              top: 20 * rpx,
              // height: 120,
              width: 750 * rpx,
              child: SafeArea(
                  child: Container(
                // decoration: BoxDecoration(color: Colors.pinkAccent),
                child: TopTab(),
              )),
            ),
          ]),
          bottomNavigationBar: BottomSafeBar(
            selIndex: selIndex,
          ),
        ));
  }
}

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

  _TopTabState createState() => _TopTabState();
}

class _TopTabState extends State<TopTab> with SingleTickerProviderStateMixin {
  @override
  void initState() {
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    RecommendProvider provider = Provider.of<RecommendProvider>(context);
    double rpx = MediaQuery.of(context).size.width / 750;
    return Row(
      crossAxisAlignment: CrossAxisAlignment.center,
      mainAxisAlignment: MainAxisAlignment.spaceBetween,
      children: [
        // BottomNavigationBar(items: [BottomNavigationBarItem(icon: null,)],)
        SizedBox(
          width: 17 * rpx,
        ),
        Icon(
          Icons.search,
          size: 50 * rpx,
          color: Colors.white,
        ),
        Container(
            child: Container(
                padding: EdgeInsets.symmetric(horizontal: 90 * rpx),
                width: 500 * rpx,
                child: TabBar(
                  indicatorColor: Colors.white,
                  labelStyle: TextStyle(color: Colors.white, fontSize: 20),
                  indicatorPadding: EdgeInsets.symmetric(horizontal: 30),
                  unselectedLabelStyle:
                      TextStyle(color: Colors.grey[700], fontSize: 18),
                  controller: provider.controller,
                  tabs: <Widget>[Text("关注"), Text("推荐")],
                ))),
        Icon(
          Icons.live_tv,
          size: 30,
          color: Colors.white,
        ),
        SizedBox(
          width: 10,
        ),
      ],
    );
  }
}