如何在Flutter中使一个悬浮小部件位于AppBar的正下方。

huangapple go评论61阅读模式
英文:

How to make a floating widget just below AppBar in flutter

问题

我正在尝试使用Flutter实现以下设计。

如何在Flutter中使一个悬浮小部件位于AppBar的正下方。

我可以通过以下代码示例来实现这一点。

Scaffold(
    drawer: const NavDrawer(), // 抽屉小部件
    appBar: AppBar(
      actions: <Widget>[
        IconButton(
          icon: const Icon(Icons.notifications),
          onPressed: () {
            //...
          },
        ),
        IconButton(
          icon: const Icon(Icons.filter_alt),
          onPressed: () {
            //...
          },
        ),
      ],
    ),
    body: Column(
      children: [
        const CommonSearchBar(), // 常见搜索栏小部件。
        Expanded(
          child: NestedScrollView(
            floatHeaderSlivers: true,
            headerSliverBuilder: (context, value) {
              return [
                SliverList(
                  delegate: SliverChildListDelegate.fixed(
                    [
                      ClipRRect(
                        borderRadius: BorderRadius.circular(20.0),
                        child: Image.asset(
                            'assets/images/valentine_image.png'),
                      ),
                    ],
                  ),
                ),
              ];
            },
            body: GridView.builder(
                gridDelegate:
                    const SliverGridDelegateWithFixedCrossAxisCount(
                  crossAxisCount: 2,
                ),
                itemCount: 100,
                itemBuilder: (BuildContext context, int index) {
                  return Card(
                    color: Colors.amber,
                    child: Center(child: Text('$index')),
                  );
                }),
          ),
        ),
      ],
    ),
  ),

这里搜索栏需要保留在屏幕上,其余部分在滚动时需要滚动。

但我对Flutter非常陌生,我需要知道这是否是更好的实现方式。

如果不是,请帮助我以更好的方式实现这个。

谢谢。

英文:

I am trying to implement the below design with Flutter.

如何在Flutter中使一个悬浮小部件位于AppBar的正下方。

I could manage to do that by following the code sample.

Scaffold(
    drawer: const NavDrawer(), // drawer widget
    appBar: AppBar(
      actions: &lt;Widget&gt;[
        IconButton(
          icon: const Icon(Icons.notifications),
          onPressed: () {
            //...
          },
        ),
        IconButton(
          icon: const Icon(Icons.filter_alt),
          onPressed: () {
            //...
          },
        ),
      ],
    ),
    body: Column(
      children: [
        const CommonSearchBar(), // common search bar widget.
        Expanded(
          child: NestedScrollView(
            floatHeaderSlivers: true,
            headerSliverBuilder: (context, value) {
              return [
                SliverList(
                  delegate: SliverChildListDelegate.fixed(
                    [
                      ClipRRect(
                        borderRadius: BorderRadius.circular(20.0),
                        child: Image.asset(
                            &#39;assets/images/valentine_image.png&#39;),
                      ),
                    ],
                  ),
                ),
              ];
            },
            body: GridView.builder(
                gridDelegate:
                    const SliverGridDelegateWithFixedCrossAxisCount(
                  crossAxisCount: 2,
                ),
                itemCount: 100,
                itemBuilder: (BuildContext context, int index) {
                  return Card(
                    color: Colors.amber,
                    child: Center(child: Text(&#39;$index&#39;)),
                  );
                }),
          ),
        ),
      ],
    ),
  ),

here Search bar needs to stay on the screen and the rest of the part needs to scroll while scrolling.

but I am very new to Flutter and I need to know if is this the better approach to do this.

If not please help me to implement this in a better way.

thank you.

答案1

得分: 0

Without dependency - Sliver App Bar

With dependency: Sticky Header

英文:

For your requirement you should try with dependency and without dependency.

Without dependency - Sliver App Bar

With dependency :- Sticky Header

答案2

得分: 0

你可以更容易地使用SliverAppBar来实现。

您不必使用Scaffold的appBar属性,只需将SliverAppBar添加到headerSlivers中。在SliverAppBar中,您可以添加一个底部小部件,它将与应用栏一起保持在顶部,您可以将操作按钮和标题添加到其中。

一个最小的示例:

Scaffold(
  body: NestedScrollView(
    headerSliverBuilder: (BuildContext context, bool innerBoxIsScrolled) {
      return [
        SliverAppBar(
          title: Text("Title"),
          floating: false,
          snap: false,
          pinned: true,
          actions: [
            IconButton(
              icon: const Icon(Icons.notifications),
              onPressed: () {
                //...
              },
            ),
            IconButton(
              icon: const Icon(Icons.filter_alt),
              onPressed: () {
                //...
              },
            ),
          ],
          bottom: PreferredSize(
            preferredSize: Size(double.infinity, 50),
            child: Text("Search")
          ),
        )
      ];
    },
    body: ListView.builder(
        itemCount: 200,
        itemBuilder: (context, index) {
          return Text("$index item");
        },
    ),
  )
);
英文:

You can do it easier with a SliverAppBar

You don't have to use the scaffold appBar property, just add a SliverAppBar to the headerSlivers.
In the SliverAppBar you can add a bottom widget what will stay on top with the app bar, you can add the action buttons and title to it.

A minimal example:

Scaffold(
  body: NestedScrollView(
    headerSliverBuilder: (BuildContext context, bool innerBoxIsScrolled) {
      return [
        SliverAppBar(
          title: Text(&quot;Title&quot;),
          floating: false,
          snap: false,
          pinned: true,
          actions: [
            IconButton(
              icon: const Icon(Icons.notifications),
              onPressed: () {
                //...
              },
            ),
            IconButton(
              icon: const Icon(Icons.filter_alt),
              onPressed: () {
                //...
              },
            ),
          ],
          bottom: PreferredSize(
            preferredSize: Size(double.infinity, 50),
            child: Text(&quot;Search&quot;)
          ),
        )
      ];
    },
    body: ListView.builder(
        itemCount: 200,
        itemBuilder: (context, index) {
          return Text(&quot;$index item&quot;);
        },
    ),
  )
);

huangapple
  • 本文由 发表于 2023年6月5日 01:24:28
  • 转载请务必保留本文链接:https://go.coder-hub.com/76401597.html
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定