web-dev-qa-db-ja.com

NativeScriptレイアウトでアイテムを中央揃えおよび右/左揃え

NativeScriptアプリのコンテキストでは、かなりシンプルに見える方法を実行するための効率的でハックのない方法を見つけるのに苦労してきました。1つのアイテムをレイアウトの中央に配置し、別のアイテムを右または左に配置しますレイアウトの-この質問の画像のようなもの： 中央と右揃えflexbox elements 。項目はすべて1つの行にあるはずです。 （私はこれらのソリューションを調べましたが、疑似要素を追加したくありません。多くのCSSがNativeScriptで機能しないだけです。）これを行うための、クリーンで標準的な方法がありますか？デフォルトのレイアウト？これが十分に「特定」されていない場合は、次のようなシナリオがあるとします。

<SomeLayout>
  <Label text="Center me"></Label>
  <Label text="Pull me to the right"></Label>
</SomeLayout>

ラベルのテキストプロパティは、私が探しているものを説明しています。提案をテストするか、それらが機能することを確認してください。

nativescript
7
Andrew Puglionesi

両方のラベルに同じ行番号を適用することにより、horizontalAlignmentをGridLayoutとともに使用できます。

<GridLayout rows="auto" columns="*">
  <Label row="0" horizontalAlignment="center" text="Center me" class="center"></Label>
  <Label row="0" horizontalAlignment="right" text="Pull me to the right" class="right"></Label>
</GridLayout>

horizontal-align属性を使用して、CSSからhorizontalAlignmentプロパティを設定することもできます。

.center{
    horizontal-align:center;
}
.right{
    horizontal-align:right;
}

主なトリックは、同じ行番号をラベルに付けて、それらが互いに重なるようにすることです。

12
bhavin jalodara