小编Tim*_*Tim的帖子

我有一个 HStack：

struct BottomList: View {
    var body: some View {
        HStack() {
            ForEach(navData) { item in
                NavItem(image: item.icon, title: item.title)
            }
        }
    }
}

如何以相等的间距将其内容完美地居中并自动填充整个宽度？

仅供参考，就像 Bootstraps CSS 类 .justify-content-around

我想为图像创建滚动视图/滑块。请参阅我的示例代码：

ScrollView(.horizontal, showsIndicators: true) {
      HStack {
           Image(shelter.background)
               .resizable()
               .frame(width: UIScreen.main.bounds.width, height: 300)
           Image("pacific")
                .resizable()
                .frame(width: UIScreen.main.bounds.width, height: 300)
      }
}

虽然这允许用户滑动，但我希望它有点不同（类似于 UIKit 中的 PageViewController）。我希望它表现得像我们从许多以点为指示器的应用程序中知道的典型图像滑块：

1. 它应始终显示完整图像，没有中间 - 因此，如果用户拖动并在中间停止，它将自动跳转到完整图像。
2. 我想要点作为指标。

因为我看到很多应用程序使用这样的滑块，所以一定有已知的方法，对吧？

我目前正在尝试将Lottie实现到我的 Angular Web 应用程序中。

不知怎的，我还无法做到这一点。我尝试按照github的说明进行操作，但这会导致多个错误，如 fe：

lottie-player 不是已知的 ng 模块。

此外，我尝试为 Angular 安装ng-lottie - 因为原始版本无法工作 - 但这个版本没有提供任何选项来跳转到某一帧或仅循环到特定帧。

有谁知道让乐蒂玩家工作的替代方案或方法？

我目前正在尝试向我的项目添加自定义字体，但不知何故无法工作。

我已经将 .otf 文件添加到字体文件夹中，检查它是否以我的项目为目标并添加Fonts provided by application到 Info.plist。

struct ContentView: View {
    var body: some View {
        Text("CLOSEST")
          .foregroundColor(Color("primary"))
          .font(Font.custom("HelveticaNowDisplayBold", size: 60))
    }
}

我试图实现以下效果：
第一个容器（其中有一个名为 的类）的.top-container高度约为一页半。一开始，用户应该能够滚动直到该容器的末尾，但是一旦到达该容器，该容器就会变成fixed并且以下元素应该通过滚动来重叠它。

我的方法是检测用户何时到达顶部容器的末端，以便将其位置更改为固定。但是如何检测用户何时到达某个滚动点呢？

还有其他方法可以达到预期的效果吗？

我的代码：

<div class="container-fluid px-0 top-container">

  <div class="container-fluid bg-test justify-content-center min-vh-100 d-flex">
    <h1 class="align-self-center">PURE</h1>
  </div>

  <div class="container-fluid justify-content-center d-flex collections" *ngIf="collections">
    <div class="row align-self-center justify-content-around">
      <div class="col-12 mb-5 text-center">
        <h1>ALL COLLECTIONS</h1>
      </div>
      <div class="col-3" *ngFor="let collection of collections">
        <div class="flex-row">
          <div class="col-12 text-center">
            <h4>{{collection.name}}</h4>
            <p>- {{collection.desc}} -</p>
          </div>
          <div class="col-12 d-flex justify-content-center">
            <img [src]="collection.image" [alt]="collection.name" class="w-75 align-self-center">
          </div>
        </div>
      </div>
    </div>
  </div>

</div>

<div class="padding-top">
  <app-slider></app-slider>
  <app-presentation></app-presentation>
</div>

CSS：

.top-container { …

我目前正在尝试按照教程处理 SwiftUI，但不知何故我无法解决一个问题：

我创建了另一个视图，即我的 HomeView.swift - 该文件包含以下代码：

import SwiftUI

struct Home: View {
    var menu = menuData
    @State var show = false

    var body: some View {
        ZStack {

            ZStack(alignment: .topLeading) {
                Button(action: { self.show.toggle() }) {
                    HStack {
                        Spacer()
                        Image(systemName: "list.dash")
                            .foregroundColor(Color("primary"))
                    }
                    .padding(.trailing, 20)
                    .frame(width: 90, height: 60)
                    .background(Color.white)
                    .cornerRadius(30)
                    .shadow(color: Color("shadow"), radius: 10, x: 0, y: 10)
                }
                Spacer()
            }

            ZStack(alignment: .topTrailing) {
                Button(action: { self.show.toggle() }) {
                    HStack {
                        Spacer()
                        Image(systemName: "map.fill")
                            .foregroundColor(Color("primary"))
                    }
                    .padding(.trailing, 20)
                    .frame(width: …

我正在尝试将数据从 ScrollView 的组件传递到模式。在这种情况下，我试图传递的数据是image. ShelterView我的方法是每次单击a 时更新状态。

有数据被传递到ShelterViewDetailed，但不知何故只有ForEach-Loop 的最后一个item.background。换句话说，无论ShelterView单击什么，总是item.background显示最后一个。

有什么建议么？

struct HomeList: View {
    @State var showContent = false
    @State var image = ""
    var shelters = SheltersData

    var body: some View {
        VStack() {
            HStack {
                HomeListTitle()
                Spacer()
            }
            .padding(.leading, 40)

            ScrollView(.horizontal, showsIndicators: false) {
                HStack(spacing: 35) {
                    ForEach(shelters) { item in
                        ShelterView(title: item.title, background: item.background)
                            .onTapGesture {
                                self.showContent.toggle()
                                self.image = item.background
                        }
                        .sheet(isPresented: self.$showContent)
                        { ShelterDetailedView(image: self.image) …

我想在元素完全居中时修复它的位置。目前，当它完全可见时，它正在被修复，因此会捕捉到中心。- 我可以以某种方式观察元素何时居中吗？

const box = document.querySelector(".box");

const obs = new IntersectionObserver(entries => {
  if (entries[0].isIntersecting) {
    box.style.position = "fixed";
    box.style.top = "50%";
    box.style.transform = "translateY(-50%)"
  }
}, {threshold: 1})

obs.observe(box);

.v-detail__video {
  width: 100vw;
  height: 300vh;
  display: flex;
  padding-top: 70vh;
  justify-content: center;
}

.box {
  background-color: black;
  width: 50vw;
  height: 200px;
}

<div class="v-detail__video">
  <div class="box"></div>          
</div>

最近，我多次遇到自定义字体的一个特定问题。无论我是为 iOS、Android 还是 Web 编程 - 问题总是发生。

字体的垂直对齐。让我们看一个例子：

使用任何类型的填充都可以工作，但考虑到应用程序必须具有响应性，这很糟糕。

那么如何删除字体下方的这个空间/距离？

我最近为 Angular 8 实现了 Angular Universal。但是运行npm run serve:ssr会返回以下结果：

ReferenceError: document is not defined
    at new CssKeyframesDriver (/Users/timfuhrmann/Documents/Entwicklung/norebro/node_modules/@angular/animations/bundles/animations-browser.umd.js:4379:26)
    at instantiateSupportedAnimationDriver (/Users/timfuhrmann/Documents/Entwicklung/norebro/node_modules/@angular/platform-browser/bundles/platform-browser-animations.umd.js:412:88)
    at _callFactory (/Users/timfuhrmann/Documents/Entwicklung/norebro/node_modules/@angular/core/bundles/core.umd.js:21002:24)
    at _createProviderInstance (/Users/timfuhrmann/Documents/Entwicklung/norebro/node_modules/@angular/core/bundles/core.umd.js:20960:30)
    at resolveNgModuleDep (/Users/timfuhrmann/Documents/Entwicklung/norebro/node_modules/@angular/core/bundles/core.umd.js:20921:25)
    at _createClass (/Users/timfuhrmann/Documents/Entwicklung/norebro/node_modules/@angular/core/bundles/core.umd.js:20989:72)
    at _createProviderInstance (/Users/timfuhrmann/Documents/Entwicklung/norebro/node_modules/@angular/core/bundles/core.umd.js:20957:30)
    at resolveNgModuleDep (/Users/timfuhrmann/Documents/Entwicklung/norebro/node_modules/@angular/core/bundles/core.umd.js:20921:25)
    at _callFactory (/Users/timfuhrmann/Documents/Entwicklung/norebro/node_modules/@angular/core/bundles/core.umd.js:21008:71)
    at _createProviderInstance (/Users/timfuhrmann/Documents/Entwicklung/norebro/node_modules/@angular/core/bundles/core.umd.js:20960:30)

有人知道这意味着什么吗？