flutter3.0学习笔记

SliverVisibility

Preview

SliverVisibility显示或隐藏 sliver。当sliver不可见时,用replacementSliver包起来。构造函数:

const SliverVisibility({
    super.key,
    required this.sliver,
    this.replacementSliver = const SliverToBoxAdapter(),
    this.visible = true,//子组件是否可见,默认true(可见)
    this.maintainState = false,//用于确定在不可见时是否维护 sliver 子树的 State 对象
    this.maintainAnimation = false,//不可见时,是否维持子组件中的动画
    this.maintainSize = false,//不可见时是否留有空间(设置为true,会报错。如果想隐藏并保留组件空间请使用Opacity)
    this.maintainSemantics = false,
    this.maintainInteractivity = false,//允许在隐藏时进行交互
    })
  })

例子:

import 'package:flutter/material.dart';

class SliverVisibilityPage extends StatefulWidget {
  const SliverVisibilityPage({Key? key}) : super(key: key);

  @override
  State<SliverVisibilityPage> createState() => _SliverVisibilityPageState();
}

class _SliverVisibilityPageState extends State<SliverVisibilityPage> {
  bool _isVisible = true;
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('SliverVisibility'),),
      body: CustomScrollView(
        slivers: [
          SliverVisibility(
            visible: _isVisible,
            replacementSliver: SliverToBoxAdapter(
              child: Container(
                width: double.infinity,
                height: 300,
                color: Colors.blue,
                child: const Center(
                  child: Text('图片隐藏时显示',style: TextStyle(color: Colors.white),),
                ),
              ),
            ),
            sliver: SliverToBoxAdapter(
              child:Container(
                width: double.infinity,
                height: 300,
                alignment: Alignment.center,
                decoration: const BoxDecoration(
                    image:DecorationImage(
                      image:AssetImage('images/liu.webp'),
                      alignment: Alignment.center,
                      fit: BoxFit.cover,
                    )
                ),
                child: IconButton(
                  iconSize: 40,
                  icon: const Icon(Icons.ads_click),
                  onPressed: (){
                    setState(() {
                      _isVisible = !_isVisible;
                    });
                  },
                ),
              )
            ),
          )
        ],
      ),
    );
  }
}

黄橙色娱乐综艺视频背景配图动感个人分享抖音视频 (1).gif