Трепетание, как прокрутить до определенной c позиции элемента в SliverList? - PullRequest
1 голос
/ 04 марта 2020

У меня есть SliverList с делегатом sliverchildbuilderdelegate, моя проблема в том, что я не могу установить ScrollController на SliverList, потому что я хочу управлять прокруткой моего Списка, я ищу прокрутку до указанного элемента c в списке (который очень большой ) и в обычном ListView эта работа очень проста, и мне интересно, почему в SliverList нет такого свойства контроллера прокрутки, как ListView?
Примечание : Я знаю, что CustomScrollView имеет свойство контроллера, и я проверил, но при этом будет прокручиваться весь видовой экран, а не только Список

 @override
  Widget build(BuildContext context) {
    MainState m = Provider.of<MainState>(context, listen: false);
    return DefaultTabController(
      length: m.itemCategoryList.length,
      child: Scaffold(
          // appBar: _createAppBar(),
          body: Builder(builder: (context) => _createBody(context))),
    );
  }

  AppBar _createAppBar() {
    MainState m = Provider.of<MainState>(context);

    return AppBar(
      title: Text(
        m.selectedPartner.fullname,
        style: Theme.of(context).textTheme.display3,
      ),
      leading: IconButton(
        icon: Icon(Icons.arrow_back),
        onPressed: () {
          Navigator.pop(context);
        },
      ),
    );
  }

  _createBody(BuildContext context) {
    MainState m = Provider.of<MainState>(context);
    return CustomScrollView(
      slivers: <Widget>[
        SliverAppBar(
          titleSpacing: 0.0,
          elevation: 20.0,
          title: Container(
            decoration: BoxDecoration(color: Colors.black.withOpacity(0.3)),
            child: Column(
              children: <Widget>[
                Row(
                  mainAxisAlignment: MainAxisAlignment.spaceAround,
                  children: <Widget>[
                    IconButton(
                      icon: Icon(Icons.arrow_back),
                      onPressed: () {
                        Navigator.pop(context);
                      },
                    ),
                    Spacer(
                      flex: 2,
                    ),
                    IconButton(
                      icon: Icon(Icons.info),
                      onPressed: () {},
                    ),
                    IconButton(
                      icon: Icon(Icons.search),
                      onPressed: () {},
                    ),
                  ],
                ),
              ],
            ),
          ),
          centerTitle: false,
          automaticallyImplyLeading: false,
          pinned: true,
          bottom: PreferredSize(
            // Add this code
            preferredSize: Size.fromHeight(10.0), // Add this code
            child: Text(''), // Add this code
          ),
          expandedHeight: 250,
          flexibleSpace: FlexibleSpaceBar(
              centerTitle: true,
              collapseMode: CollapseMode.none,
              background: Stack(
                children: <Widget>[
                  Image.network(
                    m.selectedPartner.imagepath,
                    fit: BoxFit.cover,
                    height: 300.0,
                    width: MediaQuery.of(context).size.width,
                    color: Colors.black.withOpacity(0.6),
                    colorBlendMode: BlendMode.darken,
                  ),
                  Align(
                    alignment: Alignment.center,
                    child: Column(
                      mainAxisAlignment: MainAxisAlignment.center,
                      children: <Widget>[
                        Text(
                          m.selectedPartner.fullname,
                          style: Theme.of(context)
                              .textTheme
                              .headline
                              .copyWith(color: Colors.white),
                        ),
                        Text(
                          m.selectedPartner.categorytexts,
                          style: Theme.of(context)
                              .textTheme
                              .title
                              .copyWith(fontSize: 17.0, color: Colors.white),
                        ),
                      ],
                    ),
                  ),
                  Align(
                    alignment: Alignment.bottomCenter,
                    child: Container(
                      height: 30.0,
                      decoration: BoxDecoration(color: Colors.white),
                      child: Row(
                        children: <Widget>[
                          Text(
                              "Delivery time :" +
                                  m.selectedPartner.deliverytime.toString() +
                                  " mins",
                              style: Theme.of(context).textTheme.subtitle)
                        ],
                      ),
                    ),
                  )
                ],
              )),
        ),
        SliverPersistentHeader(
          delegate: _SliverAppBarDelegate(
            TabBar(
              isScrollable: true,
              labelColor: Colors.black87,
              unselectedLabelColor: Colors.black,
              tabs: m.itemCategoryList
                  .map((ele) => Tab(
                        text: ele.itemcategoryname,
                      ))
                  .toList(),
            ),
          ),
          pinned: true,
        ),
//=========I want to scroll to a specific position in this list
        GroupedSliverList(
            elements: m.itemList,
            groupBy: (ItemModel item) => item.itemcategory_id,
            groupSeparatorBuilder: (i, item) => _createGroupItem(i, item),
            itemBuilder: (_, item) => _createItem(item)),
      ],
    );
  }


  _createGroupItem(int categId, ItemModel item) {
    MainState m = Provider.of<MainState>(context, listen: false);
    ItemCategoryModel categModel =
        m.itemCategoryList.firstWhere((ele) => ele.id == categId);
    return Container(
      child: Text(
        categModel.itemcategoryname,
        style: Theme.of(context).textTheme.headline,
      ),
    );
  }



  _createItem(ItemModel item) {
    return Card(
      elevation: 3.0,
      child: Padding(
        padding: const EdgeInsets.all(10.0),
        child: Row(
          children: <Widget>[
            CircleAvatar(
              radius: 30.0,
              backgroundImage: NetworkImage(item.imagepath),
            ),
            SizedBox(
              width: 18.0,
            ),
            _createDetailColumn(item)
          ],
        ),
      ),
    );
  }

  _createDetailColumn(ItemModel item) {
    return Expanded(
      child: Column(
        mainAxisAlignment: MainAxisAlignment.center,
        mainAxisSize: MainAxisSize.min,
        children: <Widget>[
          Flexible(
              flex: 1,
              child: Row(
                children: <Widget>[
                  Expanded(
                    child: Text(
                      item.itemname,
                      style: Theme.of(context).textTheme.title,
                    ),
                  ),
                ],
              )),
          SizedBox(
            height: 5.0,
          ),
          Flexible(
            flex: 1,
            child: Row(
              children: <Widget>[
                Expanded(
                  child: Text(
                    item.description,
                    style: Theme.of(context).textTheme.subtitle,
                  ),
                ),
              ],
            ),
          ),
          SizedBox(
            height: 5.0,
          ),
          SizedBox(
            height: 8.0,
          ),
          Row(
            children: <Widget>[
              Container(
                decoration: BoxDecoration(
                    border: Border.all(color: Colors.green, width: 1.0),
                    borderRadius: BorderRadius.circular(10.0)),
                child: Padding(
                  padding: const EdgeInsets.all(6.0),
                  child: Text(item.price.toString() + " L.E.",
                      style: Theme.of(context)
                          .textTheme
                          .subtitle
                          .copyWith(color: Colors.green, fontSize: 16.0)),
                ),
              ),
            ],
          )
        ],
      ),
    );
  }
}

class _SliverAppBarDelegate extends SliverPersistentHeaderDelegate {
  _SliverAppBarDelegate(this._tabBar);

  final TabBar _tabBar;

  @override
  double get minExtent => _tabBar.preferredSize.height;
  @override
  double get maxExtent => _tabBar.preferredSize.height;

  @override
  Widget build(
      BuildContext context, double shrinkOffset, bool overlapsContent) {
    return new Container(
      color: Colors.yellow,
      child: _tabBar,
    );
  }

  @override
  bool shouldRebuild(_SliverAppBarDelegate oldDelegate) {
    return false;
  }
}
...