Question

我正在尝试构建一个自定义滚动视图，其中包含一个条形应用栏，以实现类似于此处所示的内容：

https://medium.com/@diegoveloper/flutter-collapsing-toolbar-sliver-app-bar-14b858e87abe

但是我想使用Search这个词，在它下面我想要3个IconButtons均匀分布，当滚动页面（CustomScrollView）时，我希望将3个IconButtons固定在SliverAppBar的顶部，而Search Text消失...

我试图通过以下代码实现以上目标：

 class SearchPage extends StatelessWidget {

      const SearchPage();

      @override
      Widget build(BuildContext context) {
        return CustomScrollView(slivers: <Widget>[
        const SliverAppBar(
        pinned: true,
            expandedHeight: 250.0,
            flexibleSpace: _buildSliverAppBarFlex(),
            );
      }


       Widget _buildSliverAppBarFlex() {
        return Container(
            child: Column(
              children: <Widget>[
                Text("Search", style: TextStyle(fontSize: 24.0,
                    color: Colors.white,
                    fontWeight: FontWeight.bold)),
                Row(children: <Widget>[
                  IconButton(icon: Icon(Icons.flight)),
                  IconButton(icon: Icon(Icons.hotel)),
                  IconButton(icon: Icon(Icons.drive_eta))
                ])
              ],
            )
        );
      }
    }

但是，我收到警告，说spacespace必须使用const构造函数小部件，而我制作的_buildSilverAppBarFlex窗口小部件不是-我也不能向其添加const或final ...我如何实现我想要的任何想法？

Answer 1

出现警告是因为您在const之前使用SliverAppBar，将其删除，警告将消失。

所以，代替这个

const SliverAppBar(...)

使用它。

SliverAppBar(...)

如果您想在那里使用const，请确保您的FlexibleSpaceBar也是const。

为什么Sliver App Bar的flexibleSpace参数必须使用带有const构造函数的Widget？

1 个答案: