flutter - 如何通过单击 SliverAppbar 颤振中的按钮来最小化 SliverList

Question

如何通过单击 SliverAppBar 中的按钮自动最小化 Sliver 列表

我在 SliverAppbar 中有最小化按钮，在 SliverList 中有多个 ListTiles。我想通过单击此最小化按钮以动画方式最小化所有列表项

这是主类的代码

class _MyHomePageState extends State<MyHomePage> {
 @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: CustomScrollView(
        slivers: [
          const CustomTitleAppbar(
            title: 'Sliver List',
          ),
          CustomSliverListView(),
        ],
      ),
    );
  }
}

SliverAppbar 的代码包含最小化按钮

class CustomTitleAppbar extends StatefulWidget {
  const CustomTitleAppbar({Key? key, required this.title}) : super(key: key);
  final String title;

  @override
  _CustomTitleAppbarState createState() => _CustomTitleAppbarState();
}

class _CustomTitleAppbarState extends State<CustomTitleAppbar> {
  @override
  Widget build(BuildContext context) {
    return SliverAppBar(
      title: Text(widget.title),
      // centerTitle: true,
      pinned: true,
      snap: false,
      backgroundColor: Colors.lightGreen,
      actions: [
        IconButton(
          onPressed: () {
            // Here i want to minimize sliver list
          },
          icon: const Icon(Icons.minimize_rounded),
        ),
      ],
    );
  }
}

具有多个项目的 Sliver List 的代码

class CustomSliverListView extends StatelessWidget {
 CustomSliverListView({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return SliverList(
      delegate: SliverChildListDelegate(
        List.generate(
          5,
          (index) => ListTile(
            leading: CircleAvatar(
              child: Text('${index + 1}'),
              backgroundColor: Colors.lightGreen,
              foregroundColor: Colors.white,
            ),
            title: Text('Row ${index + 1}'),
            subtitle: Text('Subtitle ${index + 1}'),
            trailing: const Icon(Icons.star_border_outlined),
          ),
        ),
      ),
    );
  }
}

我是 Flutter 的新手，感谢您的阅读。

Answer 1

使用 callBack 并在CustomSliverListView.

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

  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  bool _isOpen = true;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: CustomScrollView(
        slivers: [
          CustomTitleAppbar(
            title: 'Sliver List',
            onCallBack: () {
              setState(() {
                _isOpen = !_isOpen;
              });
            },
          ),
          CustomSliverListView(
            isOpen: _isOpen,
          ),
        ],
      ),
    );
  }
}

class CustomTitleAppbar extends StatefulWidget {
  final Function onCallBack;

  const CustomTitleAppbar({
    Key? key,
    required this.title,
    required this.onCallBack,
  }) : super(key: key);
  final String title;

  @override
  _CustomTitleAppbarState createState() => _CustomTitleAppbarState();
}

class _CustomTitleAppbarState extends State<CustomTitleAppbar> {
  @override
  Widget build(BuildContext context) {
    return SliverAppBar(
      title: Text(widget.title),
      // centerTitle: true,
      pinned: true,
      snap: false,
      backgroundColor: Colors.lightGreen,
      actions: [
        IconButton(
          onPressed: () {
            // Here i want to minimize sliver list
            widget.onCallBack();
          },
          icon: const Icon(Icons.minimize_rounded),
        ),
      ],
    );
  }
}

class CustomSliverListView extends StatelessWidget {
  final bool isOpen;

  const CustomSliverListView({
    Key? key,
    required this.isOpen,
  }) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return SliverList(
      delegate: SliverChildListDelegate(
        List.generate(
          isOpen ? 5 : 0,
          (index) => ListTile(
            leading: CircleAvatar(
              child: Text('${index + 1}'),
              backgroundColor: Colors.lightGreen,
              foregroundColor: Colors.white,
            ),
            title: Text('Row ${index + 1}'),
            subtitle: Text('Subtitle ${index + 1}'),
            trailing: const Icon(Icons.star_border_outlined),
          ),
        ),
      ),
    );
  }
}

它解决了你的问题吗？