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

【问题标题】：In flutter app how put data from header to appBar在颤振应用程序中如何将数据从标题到appBar
【发布时间】：2021-02-07 19:21:40
【问题描述】：

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

【问题讨论】：

标签： flutter listview header scrollcontroller

【解决方案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 以根据您所需的逻辑更改值。

【讨论】：

【解决方案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),
        ),
      );
    });
  }
}

【讨论】：