如何在 NativeScript 中限制按钮的宽度？答案

【问题标题】：How to limit the width of a Button in NativeScript?如何在 NativeScript 中限制按钮的宽度？
【发布时间】：2019-06-29 17:16:12
【问题描述】：

我正在使用 NativeScript-Vue 构建一些应用程序。试图弄清楚如何控制按钮的大小。例如，我有这个代码：

<StackLayout orientation="horizontal">
              <Button
                class="fas"
                :text="'fa-upload' | fonticon"
                @tap="()=>{backupImage(image)}"
              ></Button>
              <Button

                v-if="image.taskStatus==='pending'"
                class="far"
                :text="'fa-window-close' | fonticon"
                @tap="()=>{cancelImageBackup(image)}"
              ></Button>
  </StackLayout>

结果是这样的：

我想删除图标两侧的大“空白”灰色区域。我看到本机脚本不支持最大宽度。也试过填充。怎么办？

【问题讨论】：

尝试将自定义 CSS 类添加到图标按钮并在项目样式表中提供 width: 60px !important。
如果这不起作用，请提供一个 stackblitz 演示。
仅供参考，截至今天，{N} 不支持 !important。尽量避免使用px 单位（默认单位系统为 DPI），除非您试图限制不同屏幕密度的大小。
是的，我看到它在没有 !important 的情况下也可以工作，所以我基本上只需要使用“width”属性...

标签： css nativescript

【解决方案1】：

由于某种原因，它与 StackLayout 一起使用

<StackLayout>
  <Button text="LOGIN" class="-rounded-sm bg-primary" width="100dip"></Button>
</StackLayout>

【讨论】：