Flutter SliverAppBar, CustomScroll View и TabBars - PullRequest
Новая
       74

Flutter SliverAppBar, CustomScroll View и TabBars

0 голосов
/ 13 марта 2019

Я пытаюсь разместить TabBarView на странице, которая использует SliverAppBar и CustomScrollView. Какие-либо предложения? Я думаю, что эта проблема в том, что высота для текущих элементов в TabView равна нулю, потому что нет ограничительной рамки. Я попытался вставить SliverList с делегатом Builder, а также с Fixed, но, похоже, не могу получить нужный мне результат.

Изображение сворачивается при прокрутке, как и должно, но мне нужна оставшаяся область, чтобы заполнить две разные вкладки с различной длиной прокрутки. Если это невозможно, я могу разделить их, но я надеялся сделать что-то необычное.

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(),
        ],
      ),
    );
  }
...