在 Flutter 中滚动时如何在 SliverAppBar 中固定 TextField？答案

【问题标题】：How to pin TextField in SliverAppBar while Scrolling in Flutter?在 Flutter 中滚动时如何在 SliverAppBar 中固定 TextField？
【发布时间】：2021-11-13 12:54:49
【问题描述】：

SliverAppBar 包含文本字段搜索框，但滚动时会向上滚动。如何在滚动时显示搜索框。我做了我自己的工作，但没有工作。如果有任何关于 Sliverappbar 和 Slivergrid 的资源，它也很有用。但是现在如何固定 appbar 文本字段？

SliverAppBar(
      //snap: true,
      stretch: true,
      //floating: true,
      title: Text('Home'),
      centerTitle: true,
      expandedHeight: 100.0,
      backgroundColor: Colors.red,
      leading: IconButton(
        icon: Icon(
          Icons.menu,
          color: Colors.white,
        ),
        onPressed: () {},
      ),
      actions: [
        IconButton(
          icon: Icon(
            Icons.notifications,
            color: Colors.white,
          ),
          onPressed: () {},
        ),
      ],
      //floating: false,
      pinned: true,
      flexibleSpace: ListView(
        children: [
          SizedBox(
            height: 40.0,
          ),
          Padding(
            padding: const EdgeInsets.only(
              top: 12.0,
              bottom: 12.0,
              left: 8.0,
              right: 8.0,
            ),
            child: Container(
              height: 40,
              decoration: BoxDecoration(
                  color: Colors.white,
                  borderRadius: BorderRadius.circular(5.0)),
              child: TextField(
                decoration: InputDecoration(
                  labelText: "Search products...",
                  border: InputBorder.none,
                  icon: IconButton(onPressed: () {}, icon: Icon(Icons.search)),
                ),
              ),
            ),
          ),
        ],
      ),
    );

【问题讨论】：

标签： flutter flutter-sliverappbar

【解决方案1】：

flexibleSpace 是为这种滚动效果而设计的，它会随着滚动而缩小。但是，您可以使用 title 获得您想要的 UI，这里是演示

 SliverAppBar(
            //snap: true,
            stretch: true,
            //floating: true,
            toolbarHeight: 100.0 + kToolbarHeight,

            /// based on your desing
            title: Column(
              children: [
                Row(
                  mainAxisAlignment: MainAxisAlignment.spaceBetween,
                  children: [
                    IconButton(
                      icon: Icon(
                        Icons.menu,
                        color: Colors.white,
                      ),
                      onPressed: () {},
                    ),
                    Text('Home'),
                    IconButton(
                      icon: Icon(
                        Icons.notifications,
                        color: Colors.white,
                      ),
                      onPressed: () {},
                    ),
                  ],
                ),
                Padding(
                  padding: const EdgeInsets.only(
                    top: 12.0,
                    bottom: 12.0,
                    left: 8.0,
                    right: 8.0,
                  ),
                  child: Container(
                    height: 40,
                    decoration: BoxDecoration(
                        color: Colors.white,
                        borderRadius: BorderRadius.circular(5.0)),
                    child: TextField(
                      decoration: InputDecoration(
                        labelText: "Search products...",
                        border: InputBorder.none,
                        icon: IconButton(
                            onPressed: () {}, icon: Icon(Icons.search)),
                      ),
                    ),
                  ),
                ),
              ],
            ),

            centerTitle: true,
            // expandedHeight: 100.0,
            backgroundColor: Colors.red,
            // leading: IconButton(
            //   icon: Icon(
            //     Icons.menu,
            //     color: Colors.white,
            //   ),
            //   onPressed: () {},
            // ),
            // actions: [

            // ],
            //floating: false,
            pinned: true,
          ),

它解决了你的问题吗？

【讨论】：

为了获得正确的 UI，我更喜欢使用 Row 通过替换 leading 和 actions 来更好地控制 UI。
谢谢，我会检查并重播。
它几乎做到了，但应用栏标题和图标没有在顶部对齐。
TextField 工作正常。但应用栏标题显示在顶部，其下方的操作图标。
如前所述，我们需要使用替换leading 和actions 为行，我已经更新了答案。