如何在nativescript中为stacklayout提供边框和边框半径

Posted 2023-03-13

【中文标题】如何在nativescript中为stacklayout提供边框和边框半径

【英文标题】：how to give border and border-radius to stacklayout in nativescript

【发布时间】：2017-10-26 02:53:01

【问题描述】：

我是 nativescript 的新手。我不知道如何为 stacklayout 提供边框和边框半径。

下面我发布了到目前为止我尝试过的内容：

component.html：

 <StackLayout class ="stackBorder" orientation="horizontal">
    <Label text="Label 1"   > </Label>
    <Label text="Label 2"   > </Label>
    <Label text="Label 3"   backgroundColor="white"> </Label>
    <Label text="Label 4"   backgroundColor="white"> </Label>
  </StackLayout>

component.css：

StackLayout 
  margin: 10;
  background-color: green;



.stackBorder 
 border: 2px solid red;
   border-radius: 8px;

component.ts：

@Component(
    selector: "sdk-child-component",
    moduleId: module.id,
    templateUrl: "./component.html",
    styleUrls: ["./component.css"]
)

最后我在 stacklayout 中看不到边框。

【参考方案1】：

通过 html：

<StackLayout borderRadius="30" borderColor="red" borderWidth="3"></StackLayout>

通过 CSS：

StackLayout 
  border-color: red;
  border-width: 3;
  border-radius: 30;

【参考方案2】：

我猜你可以使用每边边框。 检查这个 https://www.nativescript.org/blog/per-side-borders-in-nativescript-css

【参考方案3】：

在 nativescript 中支持的 css 属性是边框宽度、边框颜色和边框半径。单独的标签边框是不可能的，也没有任何可靠的选择。

更多信息：

https://docs.nativescript.org/ui/styling