屏幕中间的 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的主要内容,如果未能解决你的问题,请参考以下文章
屏幕顶部的Swift Placing TabBar无法在iOS 11中运行
从嵌套的 StackNavigator 中隐藏 TabBar 的反应导航屏幕
在 iOS 中的 navigationController 堆栈中隐藏 tabBar 时,视图在屏幕上显示后向下移动
基于 Storyboard 的 TabBar 应用程序上的状态恢复在自动恢复后切换回主屏幕
如何在 react native 中实现 Twitter 个人资料屏幕的 UX,可折叠标题(Sticky TabBar)和可滚动选项卡?