flutter - 如何在 Flutter 中设置 TabBar 在 Stack 内的位置而不会出错?
问题描述
我试图在这里阅读一些解决方案Flutter:“RenderFlex children have non-zero flex but incoming height constraints are unbounded”但我仍然有错误
我正在尝试将我的 TabBar 从绿色容器的顶部移动到底部。像这样
如您所见,我有一个堆栈。蓝绿色渐变背景将作为基础,除此之外我还有 TabBar。上图 TabBar 的代码是这样的
Positioned(
child: TabBar(
unselectedLabelColor: Colors.white,
labelColor: Colors.white,
tabs: [
Tab(text: 'Tab 1'),
Tab(text: 'Tab 2'),
],
controller: _tabController,
indicatorSize: TabBarIndicatorSize.tab,
),
),
因为我想将该标签栏移动到绿色基础容器的底部,所以我将 Positioned 的底部设置为零,就像这样
Positioned(
bottom: 0, // <--- like this
child: TabBar(
unselectedLabelColor: Colors.white,
labelColor: Colors.white,
tabs: [
Tab(text: 'Tab 1'),
Tab(text: 'Tab 2'),
],
controller: _tabController,
indicatorSize: TabBarIndicatorSize.tab,
),
),
但我有错误
RenderFlex 子项具有非零 flex,但传入的宽度约束是无界的。
当一行位于不提供有限宽度约束的父行中时,例如,如果它在水平可滚动中,它将尝试沿水平轴收缩其子代。在子节点上设置 flex(例如使用 Expanded)表示子节点将展开以填充水平方向上的剩余空间。这两个指令是互斥的。如果父级要收缩包裹其子级,则子级不能同时扩展以适应其父级。
我曾尝试使用 Expanded 包装该 TabBar,但我仍然有错误。我没有一行,但错误说'当一行......'。我很困惑。请帮忙
这是我来自 DartPad 的完整代码。
class MyWidget extends StatefulWidget {
@override
_MyWidgetState createState() => _MyWidgetState();
}
class _MyWidgetState extends State<MyWidget> with SingleTickerProviderStateMixin {
late TabController _tabController;
@override
void initState() {
_tabController = new TabController(length: 2, vsync: this);
super.initState();
}
@override
void dispose() {
_tabController.dispose();
super.dispose();
}
@override
Widget build(BuildContext context) {
return Column(
mainAxisAlignment: MainAxisAlignment.start,
children: [
Stack(
children: [
BaseWithGradientColor(),
Positioned(
child: TabBar( // <---- My Problem is in here
unselectedLabelColor: Colors.white,
labelColor: Colors.white,
tabs: [
Tab(text: 'Tab 1'),
Tab(text: 'Tab 2'),
],
controller: _tabController,
indicatorSize: TabBarIndicatorSize.tab,
),
),
],
),
],
);
}
}
class BaseWithGradientColor extends StatelessWidget {
@override
Widget build(BuildContext context) {
final themeData = Theme.of(context);
return Container(
width: double.infinity,
height: MediaQuery.of(context).size.width * 0.75,
decoration: BoxDecoration(
gradient: LinearGradient(
colors: [Colors.blue, Colors.green],
),
),
);
}
}
解决方案
我认为您也可以通过仅使用列来实现它
class MyWidget extends StatefulWidget {
@override
_MyWidgetState createState() => _MyWidgetState();
}
class _MyWidgetState extends State<MyWidget> with SingleTickerProviderStateMixin {
late TabController _tabController;
@override
void initState() {
_tabController = new TabController(length: 2, vsync: this);
super.initState();
}
@override
void dispose() {
_tabController.dispose();
super.dispose();
}
@override
Widget build(BuildContext context) {
return Column(
mainAxisAlignment: MainAxisAlignment.start,
children: [
// First child (also minus the size of tabbar)
BaseWithGradientColor(),
// Second Child
TabBar( // <---- My Problem is in here
unselectedLabelColor: Colors.white,
labelColor: Colors.white,
tabs: [
Tab(text: 'Tab 1'),
Tab(text: 'Tab 2'),
],
controller: _tabController,
indicatorSize: TabBarIndicatorSize.tab,
),
/// Thir child and so on ..
],
);
}
}
class BaseWithGradientColor extends StatelessWidget {
@override
Widget build(BuildContext context) {
final themeData = Theme.of(context);
return Container(
width: double.infinity,
height: MediaQuery.of(context).size.width * 0.75,
decoration: BoxDecoration(
gradient: LinearGradient(
colors: [Colors.blue, Colors.green],
),
),
);
}
}
推荐阅读
- regex - 从包含多个 id 的响应中获取第一个“id”的正则表达式是什么?
- laravel - 模板中的模型函数调用
- perl - 使用 awk 为每个字段插入引号
- image - ImageMagick 比较 2 张图像,在输出图像上标有 2 种不同的颜色
- ionic-framework - 如何在 IONIC 4 中手动删除插页式谷歌广告
- vba - 循环遍历具有指定列号的数组中的列
- prestashop - Prestashop:隐藏没有产品的类别
- c# - 在 Linux 上反序列化 TimeZoneInfo 会抛出“Month 参数必须在 1 到 12 的范围内”
- javascript - 如何在 Visual Studio 项目中查找关键字
- mongodb - 如何在缝合函数中暂停 mongodb 缝合触发器