屏幕中间的 TabBar

Posted

技术标签:

【中文标题】屏幕中间的 TabBar【英文标题】:TabBar in the middle of the screen 【发布时间】:2021-11-14 00:43:17 【问题描述】:

我试图在屏幕中间放置一个 TabBar 来制作个人区域视图。每次我运行代码时,它都会让我跳出一个异常。 问题出现在 Tabbar 上面的部分只是用户名和 Avatar 但是当我尝试放置 appbar 时它会抛出这个“throw constraintsError;”

这是我用来制作视图的源代码:

class PersonalArea extends StatelessWidget 

  @override

  Widget build(BuildContext context) 

    String _viewSelector = "personalData";

    late Color color = Colors.white;

    return new Scaffold(

        body: StoreConnector<AppState, PersonalAreaViewModel>(
            onInit: (store) 
              store.dispatch(new GetPersonalAreaAction());
            ,
            converter: (store) => PersonalAreaViewModel.fromStore(store),
            builder: (context, viewModel) => Column(children: [
                  Stack(children: [
                    Container(
                      width: double.infinity,
                      padding: EdgeInsets.only(left: 4, right: 4),
                      child: Column(
                        children: [
                          Container(
                            height: MediaQuery.of(context).size.height / 2,
                            child: Column(
                               mainAxisSize: MainAxisSize.min,children: [
                              Stack(
                                children: [
                                  Row(
                                    mainAxisAlignment: MainAxisAlignment.center,
                                    children: [
                                      avatar(),
                                    ],
                                  ),
                                  Align(
                                    alignment: Alignment.topRight,
                                    child: edit(),
                                  )
                                ],
                              ),
                              //Avatar&Edit
                              Row(
                                mainAxisAlignment: MainAxisAlignment.center,
                                children: [
                                  Container(
                                    padding: EdgeInsets.only(top: 12),
                                    child: generateStyleText(
                                        "$FirebaseAuth.instance.currentUser?.displayName",
                                        color.primary75,
                                        FontWeight.w700,
                                        0,
                                        16,
                                        0),
                                  )
                                ],
                              ),
                              //Name
                            ]), //MainColumn
                          ),
                          DefaultTabController(
                              length: 3,
                              child: Container(
                                child: Column(
                                 
                                  children: [
                                    TabBar(
                                      tabs: [
                                        Tab(
                                          text: "Experiencia",
                                        ),
                                        Tab(
                                          text: "Area",
                                        ),
                                        Tab(
                                          text: "pedro",
                                        ),
                                      ],
                                      indicatorSize: TabBarIndicatorSize.tab,
                                    ),
                                    Expanded(
                                      child: TabBarView(
                                        children: [
                                          Text('people'),
                                          Text('Person'),
                                          Text("data"), 
                                        ],
                                      ),
                                    )
                                  ],
                                ),
                              ))
                        ],
                      ),
                    )
                  ])
                ])));
  

【问题讨论】:

【参考方案1】:

Expanded包裹DefaultTabController

【讨论】:

同样的异常。 你能分享一下具体的例外情况吗 '水平视口被赋予了无限的高度。\n' '视口在横轴上扩展以填充它们的容器并' '约束它们的子级以匹配它们在横轴上的范围。 ' '在这种情况下,水平视口被赋予了无限量的 ' '可以在其中展开的垂直空间。', 试试this

以上是关于屏幕中间的 TabBar的主要内容,如果未能解决你的问题,请参考以下文章

如何在屏幕左侧排列 Tabbar

屏幕顶部的Swift Placing TabBar无法在iOS 11中运行

从嵌套的 StackNavigator 中隐藏 TabBar 的反应导航屏幕

在 iOS 中的 navigationController 堆栈中隐藏 tabBar 时,视图在屏幕上显示后向下移动

基于 Storyboard 的 TabBar 应用程序上的状态恢复在自动恢复后切换回主屏幕

如何在 react native 中实现 Twitter 个人资料屏幕的 UX,可折叠标题(Sticky TabBar)和可滚动选项卡?