英文:
Is there a way to move HStack to leading?
问题
I'm here to provide you with the translated code portion:
struct WidgetEntryView : View {
var entry: Provider.Entry
var body: some View {
ZStack {
Color(.red)
HStack {
Text("哈哈1")
.frame(width: 50)
Text("哈哈2")
.frame(width: 50)
Text("哈哈3")
.frame(width: 50)
Text("哈哈4")
.frame(width: 50)
Text("哈哈5")
.frame(width: 50)
Text("哈哈6")
.frame(width: 50)
Text("哈哈7")
.frame(width: 50)
Text("哈哈8")
.frame(width: 50)
}
}
}
}
If you have any further questions or need additional translations, please feel free to ask.
英文:
I am having a problem with HStack which has bigger width than the parent view showing centre not leading.
struct WidgetEntryView : View {
var entry: Provider.Entry
var body: some View {
ZStack {
Color(.red)
HStack {
Text("haha1")
.frame(width: 50)
Text("haha2")
.frame(width: 50)
Text("haha3")
.frame(width: 50)
Text("haha4")
.frame(width: 50)
Text("haha5")
.frame(width: 50)
Text("haha6")
.frame(width: 50)
Text("haha7")
.frame(width: 50)
Text("haha8")
.frame(width: 50)
}
}
}
}
I'm creating a widget with some data on it. It's a medium size widget, and as you can see, HStack width gets bigger than Widget width, so it looks like below.
https://i.stack.imgur.com/uG4wO.png
Currently, anchor point of HStack is the centre, so it's showing from the centre, but I want to move it to leading so that it starts from haha1.
How can I achieve this?
答案1
得分: 0
这是您提供的代码的翻译部分：
struct WidgetEntryView : View {
var entry: Provider.Entry
var body: some View {
ZStack {
Color(.red)
Color.clear
.overlay(
HStack {
Text("哈哈1")
.frame(width: 50)
Text("哈哈2")
.frame(width: 50)
Text("哈哈3")
.frame(width: 50)
Text("哈哈4")
.frame(width: 50)
Text("哈哈5")
.frame(width: 50)
Text("哈哈6")
.frame(width: 50)
Text("哈哈7")
.frame(width: 50)
Text("哈哈8")
.frame(width: 50)
}, alignment: .leading
)
}
}
}
请注意，我只翻译了文本字符串，而不翻译代码的其他部分。
英文:
struct WidgetEntryView : View {
var entry: Provider.Entry
var body: some View {
ZStack {
Color(.red)
Color.clear
.overlay(
HStack {
Text("haha1")
.frame(width: 50)
Text("haha2")
.frame(width: 50)
Text("haha3")
.frame(width: 50)
Text("haha4")
.frame(width: 50)
Text("haha5")
.frame(width: 50)
Text("haha6")
.frame(width: 50)
Text("haha7")
.frame(width: 50)
Text("haha8")
.frame(width: 50)
}, alignment: .leading
)
}
}
}
did a trick.
答案2
得分: 0
HStack 和 ZStack 都希望其宽度与内容一样宽，因此最终都比小部件宽度大。
防止这种情况发生的方法是确保其内容具有灵活的大小/较小的最小宽度。最简单的方法是在堆栈上添加一个具有最小宽度并将堆栈与其左边沿对齐的框架：
ZStack {
Color(.red)
HStack {
...
}
.frame(minWidth: 0, alignment: .leading)
}
英文:
Both the HStack and ZStack expect to be as wide as their contents, and so both end up being larger than the widget width.
The way to prevent that is to make sure its content has a flexible size / smaller min width. The simplest would be adding a frame on the stack that has a min width and aligns the stack within it along its leading edge:
ZStack {
Color(.red)
HStack {
...
}
.frame(minWidth: 0, alignment: .leading)
}
答案3
得分: -1
另一种方法：使用GeometryReader。
在使用GeometryReader时，子对象会自动对齐到左侧。
（这可能也是一个技巧）
struct WidgetEntryView : View {
var entry: Provider.Entry
var body: some View {
GeometryReader { _ in // 用GeometryReader包裹。
ZStack {
Color(.red)
HStack {
Text("haha1")
.frame(width: 50)
Text("haha2")
.frame(width: 50)
Text("haha3")
.frame(width: 50)
Text("haha4")
.frame(width: 50)
Text("haha5")
.frame(width: 50)
Text("haha6")
.frame(width: 50)
Text("haha7")
.frame(width: 50)
Text("haha8")
.frame(width: 50)
}
}
}
}
}
英文:
Another way: Use GeometryReader
When using a GeometryReader, child objects are automatically aligned to the left.
(This may also be a trick)
struct WidgetEntryView : View {
var entry: Provider.Entry
var body: some View {
GeometryReader { _ in // Wrap with GeometryReader.
ZStack {
Color(.red)
HStack {
Text("haha1")
.frame(width: 50)
Text("haha2")
.frame(width: 50)
Text("haha3")
.frame(width: 50)
Text("haha4")
.frame(width: 50)
Text("haha5")
.frame(width: 50)
Text("haha6")
.frame(width: 50)
Text("haha7")
.frame(width: 50)
Text("haha8")
.frame(width: 50)
}
}
}
}
}
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论