Flutter - 列内的 TabBar

Question

我有一个带有图像的Column，其下方是DefaultTabController。 TabBar 基本不显示选项卡，而是显示TabBarView 的子项。

这是错误：

对空值使用的空检查运算符相关的错误原因 小部件是 TabBar lib/.../screens/specific_launch.dart:132 触发异常时正在处理以下 RenderObject： RenderCustomPaint#83c8d relayoutBoundary=up10 RenderObject: RenderCustomPaint#83c8d relayoutBoundary=up10 父数据：offset=Offset(0.0, 0.0);弹性=空； fit=null（可以使用大小） 约束：BoxConstraints(0.0

这是代码：

 return Scaffold(
    appBar: AppBar(
      title: Text(
        'Launch',
        style: GoogleFonts.poppins(fontWeight: FontWeight.w600),
      ),
      actions: [
        IconButton(icon: Icon(Icons.share_outlined), onPressed: () {})
      ],
    ),
    body: Padding(
      padding: EdgeInsets.only(
          top: getHeight(context) / 30.0,
          left: getWidth(context) / 30.0,
          right: getWidth(context) / 30.0),
      child: Column(
        children: [
          // ...first child


          SizedBox(
            width: getWidth(context),
            height: getHeight(context),
            child: DefaultTabController(
                length: 3,
                initialIndex: 0,
                child: Scaffold(
                  appBar: AppBar(
                    bottom: TabBar(
                      tabs: [
                        Tab(
                          text: 'State',
                        ),
                        Tab(
                          text: 'Mission',
                        ),
                        Tab(
                          text: 'Rocket',
                        )
                      ],
                    ),
                  ),
                  body: TabBarView(
                    children: [
                      Text(
                        'Tab 1',
                      ),
                      Text('Tab 2'),
                      Text('Tab 3')
                    ],
                  ),
                )),
          )
        ],
      ),
    ));

这就是我想要达到的结果：

Answer 1

因此，如果您想使用DefaultTabController 小部件，那么您必须使用DefaultTabController 小部件启动您的小部件树，然后添加您的Scaffold。之后我只使用了一个 Scaffold 并在 Expanded 小部件的帮助下添加了其余部分

这里是output image

class SelectionScreen extends StatefulWidget{
  @override
  State<StatefulWidget> createState() {
    // TODO: implement createState
    return _selectionScreen();
  }
}
class _selectionScreen extends State<SelectionScreen>{
  @override
  Widget build(BuildContext context) {
    // TODO: implement build

    return DefaultTabController(
        length: 3,
        initialIndex: 0,
        child: Scaffold(
          appBar: AppBar(
            title: Text('Launch',),
            actions: [IconButton(icon: Icon(Icons.share_outlined), onPressed: () {})],
          ),
          body: Column(
            children: [
              Image.network("https://i.stack.imgur.com/45Aaj.png", height: 150,),
              Container(
                height: 70,
                child: AppBar(
                  centerTitle: true,
                  title: Text("New Titile"),
                  bottom: TabBar(
                    tabs: [
                      Tab(text: 'State',),
                      Tab(text: 'Mission',),
                      Tab(text: 'Rocket',)
                    ],
                  ),
                ),
              ),
              Expanded(
                child: TabBarView(
                  children: [
                    Text('Tab 1',),
                    Text('Tab 2'),
                    Text('Tab 3')
                  ],
                ),
              )
            ],
          ),
        ));
  }
}