You need to enable JavaScript to run this app.
最新活动
大模型
产品
解决方案
定价
生态与合作
支持与服务
开发者
了解我们

如何在SwiftUI的NavigationSplitView中实现工具栏按钮右对齐(类似macOS天气App)

如何在SwiftUI的NavigationSplitView中实现工具栏按钮右对齐(类似macOS天气App)

我明白你遇到的这个问题——在NavigationSplitView里折腾工具栏按钮的对齐确实有点坑,尤其是想复刻原生App那种右侧对齐的效果,我之前也踩过类似的坑,下面给你几个实用的解决办法:

方法一:用ToolbarItemGroup指定primaryAction位置

macOS的工具栏里,.primaryAction这个位置本来就是专门给右侧主操作按钮预留的,但是直接用单个ToolbarItem有时候会因为NavigationSplitView的布局逻辑“跑偏”,把按钮放到ToolbarItemGroup里就能确保它乖乖待在右侧:

NavigationSplitView(
    sidebar: { Sidebar(selectedItem: $selectedItem) },
    detail: {
        switch selectedItem {
        case .liveStream: Text(selectedItem.label)
        case .vods: Text(selectedItem.label)
        case .clips: Text(selectedItem.label)
        }
    }
)
.toolbar(removing: .title)
.toolbarBackgroundVisibility(.hidden, for: .windowToolbar)
.toolbar {
    // 用ToolbarItemGroup包裹,指定placement为primaryAction
    ToolbarItemGroup(placement: .primaryAction) {
        Button("test") {}
    }
}

这个方法是最贴合原生系统行为的,基本能解决大部分情况的对齐问题。

方法二:把工具栏附加到Detail视图内

有时候NavigationSplitView的顶层工具栏会受到侧边栏的布局影响,导致按钮位置不对,这时候可以把工具栏移到Detail视图的内部,让它跟着详情区的布局逻辑走:

NavigationSplitView(
    sidebar: { Sidebar(selectedItem: $selectedItem) },
    detail: {
        // 用Group包裹所有详情视图,统一添加工具栏
        Group {
            switch selectedItem {
            case .liveStream: Text(selectedItem.label)
            case .vods: Text(selectedItem.label)
            case .clips: Text(selectedItem.label)
            }
        }
        .toolbar {
            ToolbarItem(placement: .primaryAction) {
                Button("test") {}
            }
        }
        .toolbar(removing: .title)
        .toolbarBackgroundVisibility(.hidden, for: .windowToolbar)
    }
)

这样工具栏属于详情视图的一部分,布局逻辑会更贴近像天气App这类原生App的表现。

方法三:用Spacer强制右对齐(应急方案)

如果上面两种方法都不适用,还可以用比较“粗暴”的方式——用Spacer占据左侧所有空间,把按钮挤到最右边:

NavigationSplitView(
    sidebar: { Sidebar(selectedItem: $selectedItem) },
    detail: {
        switch selectedItem {
        case .liveStream: Text(selectedItem.label)
        case .vods: Text(selectedItem.label)
        case .clips: Text(selectedItem.label)
        }
    }
)
.toolbar(removing: .title)
.toolbarBackgroundVisibility(.hidden, for: .windowToolbar)
.toolbar {
    ToolbarItem(placement: .automatic) {
        HStack {
            Spacer() // 这个Spacer会把按钮推到右侧
            Button("test") {}
        }
    }
}

不过这种方法属于自定义布局,在工具栏有其他元素或者窗口大小变化时可能出现布局问题,所以优先推荐前两种原生方法。

内容来源于stack exchange

火山引擎 最新活动