1

最初に下手な英語で申し訳ありません。できる限り自分自身を説明するように努めます

次のような効果を持つリストからアイテムを作成しました。

ここに画像の説明を入力

下のフィールドを埋めるためにスクロールすると、画像サイズが最小の高さ、フラット ボタンのフォント サイズ、フラット ボタンの不透明度にも縮小されます。

問題は、効果をよりスムーズにし、ボタンが常に画像から同じ距離にとどまるようにするにはどうすればよいかということです。

これはコードです：

SliverPersistentHeader makeHeader(bool pinned) {
    return SliverPersistentHeader(
      pinned: pinned,
      floating: true,
      delegate: _SliverAppBarDelegate(
        minHeight: 60.0,
        maxHeight: 200.0,
      ),
    );
  }

_SliverAppBarDelegate:

class _SliverAppBarDelegate extends SliverPersistentHeaderDelegate {
  final double minHeight;
  final double maxHeight;
  final bool hideButtonWhenExpanded;

  _SliverAppBarDelegate(
      {@required this.minHeight,
      @required this.maxHeight,
      this.hideButtonWhenExpanded = true});

  @override
  double get minExtent => minHeight;
  @override
  double get maxExtent => math.max(maxHeight, minHeight);
  @override
  Widget build(
      BuildContext context, double shrinkOffset, bool overlapsContent) {
    final appBarSize = maxHeight - shrinkOffset;
    final proportion = 2 - (maxHeight / appBarSize);
    final photoToButton = 160 * proportion;
    final percent = proportion < 0 || proportion > 1 ? 0.0 : proportion;
    return new SizedBox.expand(
      child: Container(
        color: Colors.white,
        child: Stack(
          alignment: Alignment.topCenter,
          children: <Widget>[
            Positioned(
              top: 10.0,
              child: CircleAvatar(
                minRadius: 20.0,
                maxRadius: 75.0 * proportion > 20 ? 75.0 * proportion : 20.0,
                backgroundImage: NetworkImage(
                    'https://t3.ftcdn.net/jpg/02/33/46/24/240_F_233462402_Fx1yke4ng4GA8TJikJZoiATrkncvW6Ib.jpg'),
              ),
            ),
            Positioned(
              left: 0.0,
              right: 0.0,
              top: photoToButton,
              child: Opacity(
                opacity: percent,
                child: FlatButton(
                  onPressed: () {},
                  child: Text(
                    'Add Photo',
                    style: TextStyle(
                        color: Colors.blue, fontSize: 14.0 * proportion),
                  ),
                ),
              ),
            ),
            Positioned(
              left: 0.0,
              right: 0.0,
              top: appBarSize - 1.0 > 59.0 ? appBarSize - 1 : 59.0,
              child: const Divider(
                height: 1,
                thickness: 0.5,
              ),
            )
          ],
        ),
      ),
    );
  }

  @override
  bool shouldRebuild(_SliverAppBarDelegate oldDelegate) {
    return maxHeight != oldDelegate.maxHeight ||
            minHeight !=
                oldDelegate
                    .minHeight
        ;
  }
}

可能な限りの助けに感謝します

4

1 に答える 1

1

FlexおよびFlexibleで使用できます_SliverAppBarDelegate。

  @override
  Widget build(
      BuildContext context, double shrinkOffset, bool overlapsContent) {
    final appBarSize = maxHeight - shrinkOffset;
    final proportion = 2 - (maxHeight / appBarSize);
    final photoToButton = 160 * proportion;
    final percent = proportion < 0 || proportion > 1 ? 0.0 : proportion;
    return Flex(
      direction: Axis.vertical,
      children: <Widget>[
        Flexible(
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: <Widget>[
              Flexible(
                flex: 8,
                child: CircleAvatar(
                  minRadius: 20.0,
                  maxRadius: 75.0 * proportion > 20 ? 75.0 * proportion : 20.0,
                  backgroundImage: NetworkImage(
                      'https://t3.ftcdn.net/jpg/02/33/46/24/240_F_233462402_Fx1yke4ng4GA8TJikJZoiATrkncvW6Ib.jpg'),
                ),
              ),
              Flexible(
                flex: 2,
                child: Opacity(
                  opacity: percent,
                  child: FlatButton(
                    onPressed: () {},
                    child: Text(
                      'Add Photo',
                      style: TextStyle(
                          color: Colors.blue, fontSize: 14.0 * proportion),
                    ),
                  ),
                ),
              ),
              const Divider(
                height: 1,
                thickness: 0.5,
              ),
            ],
          ),
        ),
      ],
    );
  }

結果：

解像度

于 2020-08-03T18:34:40.703 に答える