SwiftUI-列表中的两个按钮
我在列表中有两个按钮，在点击时，列表项的整个区域都会突出显示。有没有办法将两个按钮分开？
在这种情况下，我有一个“操作”按钮和一个“信息”按钮：
我发现this question，但没有直接解决方案。
代码如下：
<html xmlns:o="urn:schemas-microsoft-com:office:office" xmlns:x="urn:schemas-microsoft-com:office:excel" xmlns="http://www.w3.org/TR/REC-html40">
<head>
<meta http-equiv=Content-Type content="text/html; charset=windows-1252">
<meta name=ProgId content=Excel.Sheet>
<meta name=Generator content="Microsoft Excel 15">
<link rel=File-List href="monte_carlo%20Jun%2013,%202019%20@%2008_files/filelist.xml">
<style id="monte_carlo Jun 13, 2019 @ 08.14__21583_Styles">
<!--table {
mso-displayed-decimal-separator: "\.";
mso-displayed-thousand-separator: " ";
}
.xl1521583 {
padding-top: 1px;
padding-right: 1px;
padding-left: 1px;
mso-ignore: padding;
color: black;
font-size: 11.0pt;
font-weight: 400;
font-style: normal;
text-decoration: none;
font-family: Calibri, sans-serif;
mso-font-charset: 0;
mso-number-format: General;
text-align: general;
vertical-align: bottom;
mso-background-source: auto;
mso-pattern: auto;
white-space: nowrap;
}
.xl6321583 {
padding-top: 1px;
padding-right: 1px;
padding-left: 1px;
mso-ignore: padding;
color: black;
font-size: 11.0pt;
font-weight: 400;
font-style: normal;
text-decoration: none;
font-family: Calibri, sans-serif;
mso-font-charset: 0;
mso-number-format: General;
text-align: center;
vertical-align: middle;
mso-background-source: auto;
mso-pattern: auto;
white-space: nowrap;
}
.xl6421583 {
padding-top: 1px;
padding-right: 1px;
padding-left: 1px;
mso-ignore: padding;
color: black;
font-size: 11.0pt;
font-weight: 400;
font-style: normal;
text-decoration: none;
font-family: Calibri, sans-serif;
mso-font-charset: 0;
mso-number-format: General;
text-align: left;
vertical-align: middle;
mso-background-source: auto;
mso-pattern: auto;
white-space: normal;
}
-->
</style>
</head>
<body>
<!--[if !excel]> <![endif]-->
<!--The following information was generated by Microsoft Excel's Publish as Web
Page wizard.-->
<!--If the same item is republished from Excel, all information between the DIV
tags will be replaced.-->
<!----------------------------->
<!--START OF OUTPUT FROM EXCEL PUBLISH AS WEB PAGE WIZARD -->
<!----------------------------->
<div id="monte_carlo Jun 13, 2019 @ 08.14__21583" align=center x:publishsource="Excel">
<table border=0 cellpadding=0 cellspacing=0 width=2451 style='border-collapse:
collapse;table-layout:fixed;width:1841pt'>
<col width=121 style='mso-width-source:userset;mso-width-alt:4425;width:91pt'>
<col width=94 style='mso-width-source:userset;mso-width-alt:3437;width:71pt'>
<col width=84 style='mso-width-source:userset;mso-width-alt:3072;width:63pt'>
<col width=416 style='mso-width-source:userset;mso-width-alt:15213;width:312pt'>
<col width=49 span=3 style='mso-width-source:userset;mso-width-alt:1792;
width:37pt'>
<col width=130 span=2 style='mso-width-source:userset;mso-width-alt:4754;
width:98pt'>
<col width=128 style='mso-width-source:userset;mso-width-alt:4681;width:96pt'>
<col width=171 span=2 style='mso-width-source:userset;mso-width-alt:6253;
width:128pt'>
<col width=169 style='mso-width-source:userset;mso-width-alt:6180;width:127pt'>
<col width=84 style='mso-width-source:userset;mso-width-alt:3072;width:63pt'>
<col width=606 style='mso-width-source:userset;mso-width-alt:22162;width:455pt'>
<tr height=20 style='height:15.0pt'>
<td height=20 class=xl1521583 width=121 style='height:15.0pt;width:91pt'>L-string</td>
<td class=xl1521583 width=94 style='width:71pt'>Coordinates</td>
<td class=xl1521583 width=84 style='width:63pt'>Area</td>
<td class=xl1521583 width=416 style='width:312pt'>Bounding Coordinates</td>
<td class=xl1521583 width=49 style='width:37pt'>% of F</td>
<td class=xl1521583 width=49 style='width:37pt'>% of +</td>
<td class=xl1521583 width=49 style='width:37pt'>% of -</td>
<td class=xl1521583 width=130 style='width:98pt'>Longest F sequence</td>
<td class=xl1521583 width=130 style='width:98pt'>Longest + sequence</td>
<td class=xl1521583 width=128 style='width:96pt'>Longest - sequence</td>
<td class=xl1521583 width=171 style='width:128pt'>Average chars between Fs</td>
<td class=xl1521583 width=171 style='width:128pt'>Average chars between +s</td>
<td class=xl1521583 width=169 style='width:127pt'>Average chars between -s</td>
<td class=xl1521583 width=84 style='width:63pt'>Angle</td>
<td class=xl1521583 width=606 style='width:455pt'>Rules</td>
</tr>
<tr height=120 style='height:90.0pt'>
<td height=120 class=xl6321583 style='height:90.0pt'>F---++F-F-+F-F-+</td>
<td class=xl6421583 width=94 style='width:71pt'>[[ 0. 0. 0.]<br>
<span style='mso-spacerun:yes'> </span>[ 0. 1. 0.]<br>
<span style='mso-spacerun:yes'> </span>[ 0.4 1.9 0.]<br>
<span style='mso-spacerun:yes'> </span>[-0.4 1.4 0.]<br>
<span style='mso-spacerun:yes'> </span>[ 0.03 0.6 0.]<br>
<span style='mso-spacerun:yes'> </span>[ 0.1 1.6 0.]]</td>
<td class=xl6321583>3.531154679</td>
<td class=xl6321583>(-0.4909271959019015, 0.0, 0.4226182617406995, 1.90630778703665)
</td>
<td class=xl6321583>0.3125</td>
<td class=xl6321583>0.25</td>
<td class=xl6321583>0.4375</td>
<td class=xl6321583>1</td>
<td class=xl6321583>2</td>
<td class=xl6321583>3</td>
<td class=xl6321583>2.25</td>
<td class=xl6321583>2.666666667</td>
<td class=xl6321583>1.166666667</td>
<td class=xl6321583>0.715584993</td>
<td class=xl6321583>{'X': {'options': ['---++X', 'F-F-+X'], 'probabilities': [0.24384925254542278, 0.7561507474545772]}}</td>
</tr>
<![if supportMisalignedColumns]>
<tr height=0 style='display:none'>
<td width=121 style='width:91pt'></td>
<td width=94 style='width:71pt'></td>
<td width=84 style='width:63pt'></td>
<td width=416 style='width:312pt'></td>
<td width=49 style='width:37pt'></td>
<td width=49 style='width:37pt'></td>
<td width=49 style='width:37pt'></td>
<td width=130 style='width:98pt'></td>
<td width=130 style='width:98pt'></td>
<td width=128 style='width:96pt'></td>
<td width=171 style='width:128pt'></td>
<td width=171 style='width:128pt'></td>
<td width=169 style='width:127pt'></td>
<td width=84 style='width:63pt'></td>
<td width=606 style='width:455pt'></td>
</tr>
<![endif]>
</table>
</div>
<!----------------------------->
<!--END OF OUTPUT FROM EXCEL PUBLISH AS WEB PAGE WIZARD-->
<!----------------------------->
</body>
</html>5 个答案:
答案 0 :(得分：6)
将按钮样式设置为不同于默认样式的样式，例如BorderlessButtonStyle（）
struct Test: View {
var body: some View {
NavigationView {
List {
ForEach([
"Line 1",
"Line 2",
], id: \.self) {
item in
HStack {
Text("\(item)")
Spacer()
Button(action: { print("\(item) 1")}) {
Text("Button 1")
}
Button(action: { print("\(item) 2")}) {
Text("Button 2")
}
}
}
.onDelete { _ in }
.buttonStyle(BorderlessButtonStyle())
}
.navigationBarItems(trailing: EditButton())
}
.accentColor(.red)
}
}
答案 1 :(得分：2)
我为此问题苦了一段时间。 Apple在SwiftUI中使Button有点特殊。它可以根据使用的上下文进行更改。这就是为什么当Button位于List内时看到这种奇怪功能的原因。
幸运的是，还有其他使用.tapAction或TapGesture的方法。试试下面的代码。
var body: some View {
HStack {
Text(control.name)
Spacer()
Text("Action")
.frame(width: 250 - 10)
.padding(5)
.background(Color(white: 0.9))
.cornerRadius(10)
.frame(width: 250)
.tapAction {
print("action1")
}
Image(systemName: "info.circle")
.foregroundColor(.accentColor)
.tapAction {
print("action2")
}
}
}
或
var body: some View {
HStack {
Text(control.name)
Spacer()
Text("Action")
.frame(width: 250 - 10)
.padding(5)
.background(Color(white: 0.9))
.cornerRadius(10)
.frame(width: 250)
.gesture(TapGesture().onEnded() {
print("action1")
})
Image(systemName: "info.circle")
.foregroundColor(.accentColor)
.gesture(TapGesture().onEnded() {
print("action2")
})
}
}
答案 2 :(得分：1)
对于使用最新的SwiftUI（Xcode 11.2）和在Button中有多个HStack的用户也有类似问题的人，只有转换 all 按钮后，我的问题才能解决HStack到Image中添加.onTapGesture处理程序。
我的问题是，点击一个按钮会触发HStack中的所有其他按钮。只有将所有按钮转换为图像后，它们才停止相互干扰。
当然，如果您的按钮没有图像，则可以改用Text。
答案 3 :(得分：1)
在 Xcode 12.5 上，我在 SwiftUI 中遇到了同样的问题，点击列表项的整个区域都会突出显示。
.buttonStyle(BorderlessButtonStyle()) 完成这项工作，现在可以在列表项上分别点击这两个自定义按钮。
答案 4 :(得分：-4)
您可以添加padding或尝试添加Spacer
添加填充
HStack {
Text("Button")
Spacer()
Button(action: {
print("action")
}) {
Text("Action")
}
.frame(width: 250 - 10)
.padding(5)
.background(Color(white: 0.9))
.cornerRadius(10)
.frame(width: 250)
Group {
Button(action: {
print("action")
}) {
Image(systemName: "info.circle")
.foregroundColor(.accentColor)
}
.padding(15)
}
}
添加空格
HStack {
Text("Button")
Spacer()
Button(action: {
print("action")
}) {
Text("Action")
}
.frame(width: 250 - 10)
.padding(5)
.background(Color(white: 0.9))
.cornerRadius(10)
.frame(width: 250)
Spacer()
Group {
Button(action: {
print("action")
}) {
Image(systemName: "info.circle")
.foregroundColor(.accentColor)
}
}
}
相关问题
最新问题
- 我写了这段代码，但我无法理解我的错误
- 我无法从一个代码实例的列表中删除 None 值，但我可以在另一个实例中。为什么它适用于一个细分市场而不适用于另一个细分市场？
- 是否有可能使 loadstring 不可能等于打印？卢阿
- java中的random.expovariate()
- Appscript 通过会议在 Google 日历中发送电子邮件和创建活动
- 为什么我的 Onclick 箭头功能在 React 中不起作用？
- 在此代码中是否有使用“this”的替代方法？
- 在 SQL Server 和 PostgreSQL 上查询，我如何从第一个表获得第二个表的可视化
- 每千个数字得到
- 更新了城市边界 KML 文件的来源？