flutter - TabBar 阻碍 AppBar 主体

Question

我有一个可重用的 AppBar 小部件，我在整个应用程序中都使用了它。在我在 AppBar 底部添加 tabBar 之前，它大部分时间都可以正常工作。TabBar 会上升并阻止大部分 AppBar。我不知道如何解决这个问题。

这是不添加 TabBar 的样子

当我添加一个 tabBar 它看起来像这样

我的 AppBar 代码

class MySearchBar extends StatefulWidget implements PreferredSizeWidget {
  final List<Widget> additional;
  final BuildContext? myContext;
  final PreferredSizeWidget? bottom;
  const MySearchBar({Key? key, this.bottom, this.additional = const [], this.myContext}) : super(key: key);

  @override
  Size get preferredSize => const Size.fromHeight(kToolbarHeight);

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

class _MySearchBarState extends State<MySearchBar> {

  var authRef = Get.find<AuthController>();
  var cartRef = Get.find<CartController>();
  int amount = 0;
  List<Widget> orig = [];

  @override
  void initState() {
    super.initState();

     orig.add(
  //Some Kind of widget here for actions
);
if (widget.additional.isNotEmpty) {
      orig.addAll(widget.additional);
    } else {
      orig.add(SizedBox(
        width: 5,
      ));
    }
  }

  @override
  Widget build(BuildContext context) {
    return AppBar(
      leading: (widget.myContext!=null)? IconButton(onPressed: (){
        Navigator.of(widget.myContext!, rootNavigator: true).pop(widget.myContext);
      }, icon: Icon(Icons.arrow_back)): null,
      backwardsCompatibility: false,
      title: InkWell(
        child: Container(
          margin: EdgeInsets.all(10),
          width: Get.width * 0.7,
          decoration: BoxDecoration(
            color: Colors.white,
            borderRadius: BorderRadius.circular(15),
          ),
          child: InkWell(
            child: MyTextField(
              enable: false,
              border: InputBorder.none,
              prefixIcon: Icon(Icons.search),
              label: "Search Something".tr,
            ),
          ),
        ),
        onTap: () {
          pushNewScreen(context, screen: SearchScreen(), withNavBar: false);
        },
      ),
      actions: orig,
      bottom: widget.bottom,
    );
  }
}

我使用 TabBar 的屏幕

class FollowerAndFollowingScreenMain extends StatefulWidget {
  final bool follower;
  final String id;

  const FollowerAndFollowingScreenMain(
      {Key? key, required this.id, required this.follower})
      : super(key: key);

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

class _FollowerAndFollowingScreenMainState extends State<FollowerAndFollowingScreenMain> {

  @override
  Widget build(BuildContext context) {
    return DefaultTabController(
      length: 2,
      initialIndex: (widget.follower) ? 0 : 1,
      child: Scaffold(
        appBar: MySearchBar(
          myContext: context,
          bottom: TabBar(
            tabs: [
              Tab(
                text: "Following".tr,
              ),
              Tab(
                text: "Followers".tr,
              ),
            ],
          ),
        ),
        body: _myBody(),
      ),
    );
  }

  _myBody() {
    return TabBarView(children: [
      FollowingAndFollowersScreen(
        followers: true,
        id: widget.id,
      ),
      FollowingAndFollowersScreen(
        followers: false,
        id: widget.id,
      ),
    ]);
  }
}

标签： flutterflutter-layout

Answer 1

尝试向应用栏添加高度，如下所示：

appBar: PreferredSize(
      preferredSize: Size.fromHeight(50.0), // here the desired height
      child: AppBar(
        // ...
      )
    ),
    body: // ...