簡體   English   中英

flutter - 將固定標題添加到 SliverList

[英]flutter - add pinned title to SliverList

如何將標題添加到 SliverList,我顯示餐廳列表,我需要顯示此列表的標題,例如頂級餐廳

          SliverList(
            delegate: SliverChildBuilderDelegate(
                  (context, index) => Padding(
                padding:
                const EdgeInsets.only(left: 15.0, right: 15, bottom: 5),
                child: RestaurantWidget(restaurant: _con.topRestaurants[index]),
              ),
              childCount: _con.topRestaurants.length,
            ),
          ),

嘗試在你的 SliverList 之前添加 SliverPersistentHeader,參考這篇文章, Sliver

這是在您的頁面類中:

...
          SliverPersistentHeader(
            pinned: true,
            floating: false,
            delegate: HeaderDelegate(backgroundColor, _title),
          ),
          SliverList(
            delegate: SliverChildBuilderDelegate(
                  (context, index) => Padding(
                padding:
                const EdgeInsets.only(left: 15.0, right: 15, bottom: 5),
                child: RestaurantWidget(restaurant: _con.topRestaurants[index]),
              ),
              childCount: _con.topRestaurants.length,
            ),
          ),
...

把它放在你的頁面類之外:

class HeaderDelegate extends SliverPersistentHeaderDelegate {
  final Color backgroundColor;
  final String _title;

  Delegate(this.backgroundColor, this._title);

  @override
  Widget build(BuildContext context, double shrinkOffset, bool overlapsContent) {
    return Container(
      color: backgroundColor,
      child: Center(
        child: Text(
          _title,
          style: TextStyle(
            color: Colors.white,
            fontSize: 25,
          ),
        ),
      ),
    );
  }

  @override
  double get maxExtent => 80;

  @override
  double get minExtent => 50;

  @override
  bool shouldRebuild(SliverPersistentHeaderDelegate oldDelegate) {
    return true;
  }
}

暫無
暫無

聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.

 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM