flutter - 如何使bottomBar背景透明并使延伸主体变为真实

Question

我有以下BottomBarNavigation作为图像之一：

所以我只需要使背景颜色透明并延伸到身体..

这是我的代码：

import 'package:flutter/material.dart';
import 'package:font_awesome_flutter/font_awesome_flutter.dart';

class IPetHomeScreen extends StatefulWidget {
  @override
  _IPetHomeScreenState createState() => _IPetHomeScreenState();
}

class _IPetHomeScreenState extends State<IPetHomeScreen>
    with SingleTickerProviderStateMixin {
  TabController _tabController;

  @override
  void initState() {
    // TODO: implement initState
    super.initState();
    _tabController = TabController(length: 5, vsync: this);
  }

  @override
  void dispose() {
    // TODO: implement dispose
    super.dispose();
    _tabController.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: TabBarView(
        children: [
          Container(
            color: Colors.white,
          ),
          Container(
            color: Colors.green,
          ),
          Container(
            color: Colors.green,
          ),
          Container(
            color: Colors.green,
          ),
          Container(
            color: Colors.green,
          ),
        ],
        controller: _tabController,
      ),
      bottomNavigationBar: Padding(
        padding: const EdgeInsets.all(16.0),
        child: ClipRRect(
          borderRadius: BorderRadius.all(
            Radius.circular(50.0),
          ),
          child: Container(
            color: Colors.black54,
            width: 0.0,
            child: TabBar(
              labelStyle: TextStyle(
                fontSize: 10.0,
              ),
              labelColor: Colors.white,
              unselectedLabelColor: Colors.grey,
              indicatorColor: Colors.black54,
              tabs: [
                Tab(
                  icon: Icon(
                    FontAwesomeIcons.paw,
                    size: 24.0,
                  ),
                ),
                Tab(
                  icon: Icon(
                    FontAwesomeIcons.filter,
                    size: 24.0,
                  ),
                ),
                Tab(
                  icon: Icon(
                    FontAwesomeIcons.heart,
                    size: 24.0,
                  ),
                ),
                Tab(
                  icon: Icon(
                    FontAwesomeIcons.shoppingBasket,
                    size: 24.0,
                  ),
                ),
                Tab(
                  icon: Icon(
                    FontAwesomeIcons.userAlt,
                    size: 24.0,
                  ),
                ),
              ],
              controller: _tabController,
            ),
          ),
        ),
      ),
    );
  }
}

标签： flutterdart

Answer 1

使用bottomNavigationBar意味着这种行为。

如果要将栏放在页面上方的顶层，请Stack改用：

Scaffold(
  body: Stack(
    children: [
      TabBarView(
        children: [
          Container(color: Colors.red),
          Container(color: Colors.green),
          Container(color: Colors.blue),
        ],
        controller: _tabController,
      ),
      Align(
        alignment: Alignment.bottomCenter,
        child: Padding(
          padding: const EdgeInsets.all(16),
          child: ClipRRect(
            borderRadius: BorderRadius.circular(50),
            child: Container(
              color: Colors.black54,
              child: TabBar(
                tabs: [
                  Tab(icon: Icon(Icons.home)),
                  Tab(icon: Icon(Icons.business)),
                  Tab(icon: Icon(Icons.school)),
                ],
                controller: _tabController,
              ),
            ),
          ),
        ),
      ),
    ],
  ),
)