1

我有 ListView，当我滚动列表时，我想显示标题中的数据，该标题超出了 appBar 的屏幕顶部。StickyHeader 不建议。我特别需要在我试图使用滚动控制器但没有成功的 appBar 中显示标题中的信息 var _controller = ScrollController();

@override
   void initState() {
   super.initState();
  
   // Setup the listener.
   _controller.addListener(() {
     if (_controller.position.atEdge) {
       if (_controller.position.pixels == 0) {
         // You're at the top. 
       } else {
          // You're at the bottom. 
       }
     }
   });
 }

事实证明，只有当我回到列表顶部时才会显示一些东西。但我找不到摆脱困境的方法来显示信息

在此处输入图像描述

从列表顶部的每个标题中，所以我想将“不粘示例”替换为“标题#0”，当它位于顶部时，以及当“标题#2”位于顶部时以在 appBar 上显示它

4

2 回答 2

1

定义一个在 AppBar 中显示文本的变量（或小部件）：

String appBarTitle = "Initial Value";

定义滚动控制器：

ScrollController scrollController;

定义一个函数来作用于滚动事件（改变 AppBar 标题的值）：（刚刚添加了一个位置示例，即到达底部时的位置）

  void _scrollListener() {
    if (scrollController.offset != scrollController.position.minScrollExtent &&
        !scrollController.position.outOfRange) {
      // at bottom
      // change the value of the AppBar string
      setState(() {
        appBarTitle = "Something new";
      });
    }
  }

初始化滚动控制器

  @override
  void initState() {
    scrollController = ScrollController();
    scrollController.addListener(_scrollListener);
    super.initState();
  }

在脚手架中定义 AppBar 为：

AppBar(
        title: Text(appBarTitle),
      )

使用上述方法，您可以在列表滚动到底部时更改 AppBar 标题 - 然后您可以编辑 _scrollListener 以根据您所需的逻辑更改值。

于 2021-02-07T21:50:42.903 回答
0

您可以尝试使用sticky_headers插件：-

class Example extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return ListView.builder(itemBuilder: (context, index) {
      return StickyHeader(
        header: Container(
          height: 50.0,
          color: Colors.blueGrey[700],
          padding: EdgeInsets.symmetric(horizontal: 16.0),
          alignment: Alignment.centerLeft,
          child: Text('Header #$index',
            style: const TextStyle(color: Colors.white),
          ),
        ),
        content: Container(
          child: Image.network(imageForIndex(index), fit: BoxFit.cover,
            width: double.infinity, height: 200.0),
        ),
      );
    });
  }
}
于 2021-02-08T05:37:29.753 回答