Question

我的页面布局如下：

底部的选项卡是使用BottomNavigationBar对象中的Scaffold创建的，该对象允许在页面之间进行切换。在其中一个页面的“个人资料”页面中，我想在用户头像下显示另一个标签栏。到目前为止，我已经提出了以下代码，但是不知道如何继续：

class ProfilePageState extends State<ProfilePage> with SingleTickerProviderStateMixin {

  TabController _tabController;

  @override
  void initState() {
    _tabController = new TabController(vsync: this, length: 3);
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    return ListView(
      children: <Widget>[
        Container(
          color: Colors.lightBlue,
          child: Column(
            children: <Widget>[
              Padding(
                padding: EdgeInsets.only(top: 10.0),
                child: Center(
                    child: CircleAvatar(
                  backgroundImage: _getAvatarImage(),
                  maxRadius: 60.0,
                )),
              ),
              Padding(
                  padding: EdgeInsets.only(top: 20.0),
                  child: Center(child: Text(user == null ? "" : user.name, style: TextStyle(color: Colors.white),))),
            ],
          ),
        ),
        Material(
          color: Colors.lightBlueAccent,
          child: TabBar(
            controller: _tabController,
            tabs: [
              Tab(icon: Icon(Icons.directions_car)),
              Tab(icon: Icon(Icons.directions_transit)),
              Tab(icon: Icon(Icons.directions_bike)),
            ],
          ),
        ),
        TabBarView(
          controller: _tabController,
          children: [
            Icon(Icons.directions_car),
            Icon(Icons.directions_transit),
            Icon(Icons.directions_bike),
          ],
        )

      ],
    );
  }

在个人资料页面上我收到以下异常：

I / flutter（13456）：在performResize（）期间引发了以下断言：
  I / flutter（13456）：水平视口的高度不受限制。
  I / flutter（13456）：视口在十字形中扩展
  轴以填充其容器并约束其子项匹配
  I / flutter（13456）：它们在交叉轴上的范围。在这种情况下，
  水平视口具有无限量的I /颤振
  （13456）：要在其中扩展的垂直空间。

Answer 1

错误是因为没有固定的视口来完成布局。

考虑到草绘的布局和ListView作为根窗口小部件，我假设您要滚动内容。在这种情况下，您可以按以下方式使用NestedScrollView和SliverAppBar：

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Profile Page',
      home: ProfilePage(),
    );
  }
}

class ProfilePage extends StatefulWidget {
  ProfilePage({Key key}) : super(key: key);

  @override
  ProfilePageState createState() => ProfilePageState();
}

class ProfilePageState extends State<ProfilePage>
    with SingleTickerProviderStateMixin {
  TabController _tabController;

  @override
  void initState() {
    _tabController = TabController(vsync: this, length: 3);
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    return DefaultTabController(
        length: 3,
        child: Scaffold(
          body: NestedScrollView(
            headerSliverBuilder:
                (BuildContext context, bool innerBoxIsScrolled) {
              return <Widget>[
                SliverAppBar(
                  expandedHeight: 200.0,
                  pinned: true,
                  bottom: TabBar(
                    tabs: [
                      Tab(icon: Icon(Icons.directions_car)),
                      Tab(icon: Icon(Icons.directions_transit)),
                      Tab(icon: Icon(Icons.directions_bike)),
                    ],
                  ),
                  flexibleSpace: FlexibleSpaceBar(
                    background: SafeArea(
                      child: Container(
                        color: Colors.lightBlue,
                        child: Column(
                          children: <Widget>[
                            Padding(
                              padding: EdgeInsets.symmetric(vertical: 10.0),
                              child: Center(
                                  child: CircleAvatar(
                                // backgroundImage: _getAvatarImage(),
                                maxRadius: 60.0,
                              )),
                            ),
                            Padding(
                                padding: EdgeInsets.symmetric(horizontal: 20.0),
                                child: Center(
                                    child: Text(
                                  'User name',
                                  style: TextStyle(color: Colors.white),
                                ))),
                          ],
                        ),
                      ),
                    ),
                  ),
                  centerTitle: false,
                  title: Text('Title'),
                ),
              ];
            },
            body: TabBarView(
              controller: _tabController,
              children: [
                Icon(Icons.directions_car),
                Icon(Icons.directions_transit),
                Icon(Icons.directions_bike),
              ],
            ),
          ),
        )
        // ],
        );
  }
}

如何在页面中拥有选项卡，该页面是另一个选项卡的一部分

1 个答案: