Flutter SliverPadding


简介

SliverPadding 属于 Flutter Slivers大家族中的一个

  • SliverPadding 是 Slivers 大家族中的一类padding
  • 可以配合各种 Sliver成员使用

基本用法

这里我们结合Slivers家族中的 SliverList 来演示使用

  • Flutter 中的Slivers大家族基本都是配合CustomScrollView来实现一些自定义滚动效果
  • padding作用于每一个item
  • 对于有些特殊的sliver可能会有副作用，比如对于 pinned:true 的 SliverPersisitentHeader 设置可能会导致 APPBar与之前的sliver重叠

实例演示

import 'package:flutter/material.dart';
import 'package:flutter_go/widgets/components/Scroll/CustomScrollView/product_list.dart';


class SliverPaddingDemo extends StatelessWidget {


  Widget _buildItem(BuildContext context,ProductItem product){
     return  Container(
      height: 100.0,
      margin: const EdgeInsets.only(bottom: 5.0),
      padding: const EdgeInsets.only(left: 10.0),
      color: Colors.blueGrey,
        child: Stack(
          alignment: AlignmentDirectional.centerStart,
          children: <Widget>[
            Positioned(
                right: 40.0,
                child: Card(
                  child: Center(
                    child: Text(
                      product.name,
                      style: Theme.of(context).textTheme.title,
                      textAlign: TextAlign.center,
                    ),
                  ),
                )),
            ClipRRect(
              child: SizedBox(
                width: 70.0,
                height: 70.0,
                child: Image.asset(
                  product.asset,
                  fit: BoxFit.cover,
                ),
              ),
              borderRadius: BorderRadius.all(Radius.circular(8.0)),
            ),
          ],
        ),
    );
  }

  @override
  Widget build(BuildContext context) {
    return  CustomScrollView(
        shrinkWrap: true,
        slivers: <Widget>[
           SliverPadding(
            padding: const EdgeInsets.fromLTRB(50.0,10.0,20.0,0.0),
            sliver:  SliverList(
              delegate: SliverChildBuilderDelegate(
                  (BuildContext context, int index) {
                return _buildItem(context, products[index]);
              },
              childCount: products.length,
            ),
            ),
          )
        ],
      );
  }
}

产品列表

class ProductItem {
  final String name;
  final String tag;
  final String asset;
  final int stock;
  final double price;

  ProductItem({
    this.name,
    this.tag,
    this.asset,
    this.stock,
    this.price,
  });
}

final List<ProductItem> products = [
  ProductItem(
      name: 'Bueno Chocolate',
      tag: '1',
      asset: 'assets/images/food01.jpeg',
      stock: 1,
      price: 71.0),
  ProductItem(
      name: 'Chocolate with berries',
      tag: '2',
      asset: 'assets/images/food02.jpeg',
      stock: 1,
      price: 71.0),
  ProductItem(
      name: 'Trumoo Candies',
      tag: '3',
      asset: 'assets/images/food03.jpeg',
      stock: 1,
      price: 71.0),
  ProductItem(
      name: 'Choco-coko',
      tag: '4',
      asset: 'assets/images/food04.jpeg',
      stock: 1,
      price: 71.0),
  ProductItem(
      name: 'Chocolate tree',
      tag: '5',
      asset: 'assets/images/food05.jpeg',
      stock: 1,
      price: 71.0),
  ProductItem(
      name: 'Chocolate',
      tag: '6',
      asset: 'assets/images/food06.jpeg',
      stock: 1,
      price: 71.0),
];