Flutter开发如何将原型中的联系方式添加到AppBar与底部导航栏中间

你当前的代码里TopTabBar组件仅实现了顶部的三个标签栏，没有为标签栏对应的内容区域配置组件，因此联系方式等内容没有渲染载体，不会显示在页面中。

修改方案 #

你只需要调整_TopTabBarState类的build方法，给TopTabBar内部的Scaffold补充body属性，绑定和顶部TabBar同控制器的TabBarView，在第一个子项内放入你需要的联系方式内容即可，修改后的代码如下：

@override
Widget build(BuildContext context) {
  return Scaffold(
    appBar: PreferredSize(
      preferredSize: Size.fromHeight(kToolbarHeight),
      child: Container(
        color: Colors.amber,
        child: TabBar(
          controller: _tabController,
          indicator: UnderlineTabIndicator(
            borderSide: BorderSide(width: 0.0),
          ),
          indicatorColor: Colors.white,
          unselectedLabelColor: Colors.black,
          labelColor: Colors.white,
          indicatorWeight: 5.0,
          tabs: const [
            Tab(
                text: 'Contact Us'
            ),
            Tab(
                text: 'Nearest Branch'
            ),
            Tab(
                text: 'Nearest ATM'
            ),
          ],
        ),
      ),
    ),
    // 新增body部分，对应三个标签的内容区域
    body: TabBarView(
      controller: _tabController,
      children: [
        // 第一个标签：联系我们的联系方式内容，默认居中显示
        Center(
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            crossAxisAlignment: CrossAxisAlignment.start,
            children: const [
              Text('联系我们', style: TextStyle(fontSize: 24, fontWeight: FontWeight.bold)),
              SizedBox(height: 25),
              Text('客服热线：400-XXXX-XXXX', style: TextStyle(fontSize: 18)),
              SizedBox(height: 12),
              Text('商务邮箱：service@yourcompany.com', style: TextStyle(fontSize: 18)),
              SizedBox(height: 12),
              Text('工作时间：周一至周五 9:00-18:00', style: TextStyle(fontSize: 18)),
              // 可根据你的原型需求继续添加其他联系方式内容
            ],
          ),
        ),
        // 第二个标签：附近网点对应内容
        Center(
          child: Text('附近网点页面内容', style: TextStyle(fontSize: 25)),
        ),
        // 第三个标签：附近ATM对应内容
        Center(
          child: Text('附近ATM页面内容', style: TextStyle(fontSize: 25)),
        ),
      ],
    ),
  );
}

修改完成后，联系方式内容会默认居中显示在首页的全局AppBar和底部导航栏中间位置，切换顶部三个标签也会对应展示不同的页面内容。

内容的提问来源于stack exchange，提问作者mawa LK