Nativescript，文本字段中的图标答案

【问题标题】：Nativescript, Icon in text fieldNativescript，文本字段中的图标
【发布时间】：2019-03-04 11:07:15
【问题描述】：

我试图在 Nativescript Angular 项目的文本字段中获取图标。当我试图完成这件事时，它会被定位在场外，或者至少看起来是这样。我已经查看了一些代码示例（sample），但是当我自己尝试时它不会工作。

<GridLayout rows="auto, auto, auto, auto, auto" class="container" loaded="onLoaded()">
  <app-eon-colors-top></app-eon-colors-top>
  <StackLayout row="1" class="logo">
    <Image src="res://live_logo"></Image>
  </StackLayout>
  <Stacklayout row="2" class="form">
    <StackLayout>
      <TextField #userName hint="Användarnamn" class="field" [text]="userInput.username" required [isEnabled]="!(processing$ | async)" keyboardType="email" autocapitalizationType="none" autocorrect="false" (textChange)="setUsername($event)" (focus)="focusUserName($event)"
        (returnPress)="focusPassword()"></TextField>
    </StackLayout>
    <GridLayout columns="auto, *, auto">
      <Label col="0" class="icon fa-regular" [text]="lockIcon"></Label>
      <TextField col="1" #password hint="Lösenord" class="field" [text]="userInput.password" required [isEnabled]="!(processing$ | async)" secure="true" autocapitalizationType="none" autocorrect="false" (textChange)="setPassword($event)" (focus)="focusPassword($event)"
        (returnPress)="submit()">
      </TextField>
      <Label col="2" class="icon fa-regular" [text]="activePasswordShowHideIcon" ios:style="padding-bottom: 35" (tap)="showHidePassword()"></Label>
    </GridLayout>
    <Label class="error-msg" textWrap="true" *ngIf="(errors$ | async)" [text]="errorTxt"></Label>
    <Button class="login-button" text="LOGGA IN" [isEnabled]="!(processing$ | async)" (tap)="submit()"></Button>
  </Stacklayout>
  <ActivityIndicator rowSpan="5" color="#23a1b0" [busy]="(processing$ | async)" width="100" height="100" class="activity-indicator"></ActivityIndicator>
</GridLayout>

【问题讨论】：

标签： nativescript angular2-nativescript

【解决方案1】：

您必须删除 TextField 附带的默认背景/边框，并将边框应用于父容器，使其看起来像是 TextField 的一部分。

示例

    <StackLayout class="form">
        <GridLayout class="m-10 input-border" columns="*,auto">
            <TextField col="0" class="input"></TextField>
            <Label col="1" class="h3" text="?" verticalAlignment="center"></Label>
        </GridLayout>
    </StackLayout>

Playground Sample

【讨论】：

如果您能详细说明您对 Playground 的问题，将会很有帮助。简单地抱怨链接不起作用可能无济于事。我确定该链接仍然有效，但功能可能已损坏，您知道框架/操场会在此处更改，然后进行更新。所以请解释一下您的问题。
用版本密钥更新了链接，没有它，它会将您带到没有原始代码的其他人修改的最新版本。

【解决方案2】：

我最终将 TextField 的 margin-right 设置为负值。不确定这是否是正确的方法。但它似乎是我想要的。

<StackLayout orientation="horizontal">
    <TextField text="Test"
        (tap)="onCollectionDateTap($event)"
        style="width: 200; margin-right:-15;"></TextField>
    <Label class="fa" text="&#xf06e;" ></Label>
</StackLayout>

【讨论】：