Flutter SliverAppBar,CustomScroll视图和TabBar

时间:2019-03-13 15:51:33

标签: firebase flutter tabbar flutter-sliver

我试图将TabBarView放入使用SliverAppBar和CustomScrollView的页面中。有什么建议么?我认为这个问题是TabView中当前元素的高度为零,因为没有边界框。我尝试插入带有构建器代表和固定代表的SliverList,但似乎无法获得所需的结果。

图像在滚动时像应该的那样折叠,但是我需要下面的剩余区域来填充具有不同滚动长度的两个不同选项卡。如果这不可能,我可以将两者分开,但我希望做一些花哨的事情。

enter image description here

@override
  Widget build(BuildContext context) {
    // Use the Todo to create our UI
    return Scaffold(
      body: CustomScrollView(
        slivers: <Widget>[
          SliverAppBar(
            expandedHeight: _headerSize,
            pinned: true,
            flexibleSpace: FlexibleSpaceBar(
              title: const Text(''),
              background: Hero(
                tag: widget.item['code'],
                child: Image.network(
                  widget.item['image'],
                  fit: BoxFit.cover,
                ),
              ),
            ),
          ),
          SliverList(
            delegate: SliverChildListDelegate(<Widget>[
              Container(
                height: 50,
                child: DefaultTabController(
                  length: 2,
                  child: Scaffold(
                    appBar: TabBar(
                      tabs: const <Tab>[
                        Tab(icon: Text('Details')),
                        Tab(icon: Text('Signups'))
                      ],
                      labelColor: Colors.purple,
                      unselectedLabelColor: Colors.grey,
                      isScrollable: false,
                      indicatorColor: Colors.purple,
                    ),
                    body: TabBarView(
                      children: <Widget>[
                        _buildEvent(),
                        _displayPlayers(),
                      ],
                    ),
                  ),
                ),
              ),
            ]),
          ),
        ],
      ),
    );
  }

  Widget _buildEvent() {
    String eventType;
    if (widget.item['type'] == 'solo') {
      eventType = 'Solo Event';
    } else if (widget.item['type'] == 'team') {
      eventType = 'Teams Event';
    } else {
      eventType = 'Season';
    }

    final DateTime current = DateTime.parse(widget.item['time'].toString());
    final String month = getMonth('${current.month}');
    final int day = current.day;
    int hour;

    String minutes = '00';
    String afternoon;

    if (current.toLocal().hour > 12) {
      hour = current.toLocal().hour - 12;
      afternoon = 'PM';
    } else {
      hour = current.toLocal().hour;
      afternoon = 'AM';
    }

    if (current.toLocal().minute != 0) {
      minutes = '${current.toLocal().minute}';
    }

    return Padding(
      padding: const EdgeInsets.all(12.0),
      child: Column(
        children: <Widget>[
          ListTile(
            leading: CircleAvatar(
              radius: 15.0,
              backgroundImage: NetworkImage(_getGameIcon()),
              backgroundColor: Colors.transparent,
            ),
            title: Text(widget.item['game']),
            subtitle: Text(eventType),
          ),
          ListTile(
            leading: const Icon(Icons.calendar_today),
            title: Text('$month $day, $hour:$minutes $afternoon'),
          ),
          Container(
            alignment: Alignment.centerLeft,
            child: Padding(
              padding: const EdgeInsets.all(10.0),
              child: Text(widget.item['d1']),
            ),
          ),
          Container(
            alignment: Alignment.centerLeft,
            child: Padding(
              padding: const EdgeInsets.all(10.0),
              child: Text(widget.item['d2']),
            ),
          ),
          Container(
            alignment: Alignment.centerLeft,
            child: Padding(
              padding: const EdgeInsets.all(10.0),
              child: Text(widget.item['d3']),
            ),
          ),
          _buttonText(),
        ],
      ),
    );
  }

0 个答案:

没有答案