Question

我有 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 上

Answer 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 以根据您所需的逻辑更改值。

Answer 2

您可以试试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),
        ),
      );
    });
  }
}

在颤振应用程序中如何将数据从标题放到 appBar

2 个答案: