首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

如何在SliverAppBar的底部添加一个按钮,并使其在ExtentList上重叠?

在SliverAppBar的底部添加一个按钮,并使其在ExtentList上重叠,可以通过以下步骤实现:

  1. 首先,在SliverAppBar的bottom属性中添加一个Container组件,用于包裹按钮。
  2. 在Container组件中,设置alignment属性为Alignment.bottomCenter,使其位于底部中间位置。
  3. 在Container组件中,添加一个按钮组件,例如FloatingActionButton,用于实现底部按钮。
  4. 为了使按钮在ExtentList上重叠,需要将ExtentList组件包裹在一个Stack组件中。
  5. 在Stack组件中,首先放置ExtentList组件,然后放置一个Positioned组件,用于定位底部按钮。
  6. 在Positioned组件中,设置bottom属性为0,使按钮位于底部。
  7. 在Positioned组件中,设置left和right属性为0,使按钮水平方向上与ExtentList宽度一致。

以下是示例代码:

代码语言:txt
复制
SliverAppBar(
  // 其他属性...
  bottom: PreferredSize(
    preferredSize: Size.fromHeight(56.0),
    child: Container(
      alignment: Alignment.bottomCenter,
      child: FloatingActionButton(
        onPressed: () {
          // 按钮点击事件
        },
        child: Icon(Icons.add),
      ),
    ),
  ),
),

CustomScrollView(
  slivers: <Widget>[
    // 其他Sliver组件...
    SliverList(
      delegate: SliverChildListDelegate(
        [
          Stack(
            children: <Widget>[
              ExtentList(
                // ExtentList的配置...
              ),
              Positioned(
                bottom: 0,
                left: 0,
                right: 0,
                child: Container(
                  height: 56.0,
                  child: RaisedButton(
                    onPressed: () {
                      // 按钮点击事件
                    },
                    child: Text('底部按钮'),
                  ),
                ),
              ),
            ],
          ),
        ],
      ),
    ),
  ],
),

这样,就可以在SliverAppBar的底部添加一个按钮,并使其在ExtentList上重叠。

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

没有搜到相关的视频

领券