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

Question

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

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)),
                ),
              ),
            ),
          ),
        ],
      ),
    );

Answer 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,
          ),

它是否解决了您的问题？

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

How to pin TextField in SliverAppBar while Scrolling in Flutter?

flutter

flutter-sliverappbar