import{_ as i,r as p,o as t,c as r,b as a,d as s,a as n,w as o,e as l}from"./app--CGKFO0X.js";const d={},y=l(`<h1 id="hikage-core" tabindex="-1"><a class="header-anchor" href="#hikage-core" aria-hidden="true">#</a> hikage-core</h1><p><img src="https://img.shields.io/maven-central/v/com.highcapable.hikage/hikage-core?logo=apachemaven&amp;logoColor=orange&amp;style=flat-square" alt="Maven Central"><span style="margin-left:5px;"></span><img src="https://img.shields.io/maven-metadata/v?metadataUrl=https%3A%2F%2Fraw.githubusercontent.com%2FHighCapable%2Fmaven-repository%2Frefs%2Fheads%2Fmain%2Frepository%2Freleases%2Fcom%2Fhighcapable%2Fhikage%2Fhikage-core%2Fmaven-metadata.xml&amp;logo=apachemaven&amp;logoColor=orange&amp;label=highcapable-maven-releases&amp;style=flat-square" alt="Maven metadata URL"><span style="margin-left:5px;"></span><img src="https://img.shields.io/badge/Min SDK-21-orange?logo=android&amp;style=flat-square" alt="Android Min SDK"></p><p>这是 Hikage 的核心依赖，你需要引入此模块才能使用 Hikage 的基本功能。</p><h2 id="配置依赖" tabindex="-1"><a class="header-anchor" href="#配置依赖" aria-hidden="true">#</a> 配置依赖</h2><p>你可以使用如下方式将此模块添加到你的项目中。</p><h3 id="version-catalog-推荐" tabindex="-1"><a class="header-anchor" href="#version-catalog-推荐" aria-hidden="true">#</a> Version Catalog (推荐)</h3><p>在你的项目 <code>gradle/libs.versions.toml</code> 中添加依赖。</p><div class="language-toml line-numbers-mode" data-ext="toml"><pre class="shiki github-dark-dimmed" style="background-color:#22272e;" tabindex="0"><code><span class="line"><span style="color:#ADBAC7;">[</span><span style="color:#F69D50;">versions</span><span style="color:#ADBAC7;">]</span></span>
<span class="line"><span style="color:#ADBAC7;">hikage-core = </span><span style="color:#96D0FF;">&quot;&lt;version&gt;&quot;</span></span>
<span class="line"></span>
<span class="line"><span style="color:#ADBAC7;">[</span><span style="color:#F69D50;">libraries</span><span style="color:#ADBAC7;">]</span></span>
<span class="line"><span style="color:#ADBAC7;">hikage-core = { module = </span><span style="color:#96D0FF;">&quot;com.highcapable.hikage:hikage-core&quot;</span><span style="color:#ADBAC7;">, version.ref = </span><span style="color:#96D0FF;">&quot;hikage-core&quot;</span><span style="color:#ADBAC7;"> }</span></span>
<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><p>在你的项目 <code>build.gradle.kts</code> 中配置依赖。</p><div class="language-kotlin line-numbers-mode" data-ext="kt"><pre class="shiki github-dark-dimmed" style="background-color:#22272e;" tabindex="0"><code><span class="line"><span style="color:#DCBDFB;">implementation</span><span style="color:#ADBAC7;">(libs.hikage.core)</span></span>
<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div></div></div><p>请将 <code>&lt;version&gt;</code> 修改为此文档顶部显示的版本。</p><h3 id="传统方式" tabindex="-1"><a class="header-anchor" href="#传统方式" aria-hidden="true">#</a> 传统方式</h3><p>在你的项目 <code>build.gradle.kts</code> 中配置依赖。</p><div class="language-kotlin line-numbers-mode" data-ext="kt"><pre class="shiki github-dark-dimmed" style="background-color:#22272e;" tabindex="0"><code><span class="line"><span style="color:#DCBDFB;">implementation</span><span style="color:#ADBAC7;">(</span><span style="color:#96D0FF;">&quot;com.highcapable.hikage:hikage-core:&lt;version&gt;&quot;</span><span style="color:#ADBAC7;">)</span></span>
<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div></div></div><p>请将 <code>&lt;version&gt;</code> 修改为此文档顶部显示的版本。</p><h2 id="功能介绍" tabindex="-1"><a class="header-anchor" href="#功能介绍" aria-hidden="true">#</a> 功能介绍</h2>`,16),A={href:"https://betterandroid.github.io/Hikage/KDoc/hikage-core",target:"_blank",rel:"noopener noreferrer"},v=l(`<h3 id="基本用法" tabindex="-1"><a class="header-anchor" href="#基本用法" aria-hidden="true">#</a> 基本用法</h3><p>使用下方的代码创建你的第一个 Hikage 布局。</p><p>首先，使用 <code>Hikageable</code> 创建一个 <code>Hikage.Delegate</code> 对象。</p><blockquote><p>示例如下</p></blockquote><div class="language-kotlin line-numbers-mode" data-ext="kt"><pre class="shiki github-dark-dimmed" style="background-color:#22272e;" tabindex="0"><code><span class="line"><span style="color:#F47067;">val</span><span style="color:#ADBAC7;"> myLayout </span><span style="color:#F47067;">=</span><span style="color:#ADBAC7;"> </span><span style="color:#DCBDFB;">Hikageable</span><span style="color:#ADBAC7;"> {</span></span>
<span class="line"><span style="color:#ADBAC7;">    </span><span style="color:#DCBDFB;">LinearLayout</span><span style="color:#ADBAC7;"> {</span></span>
<span class="line"><span style="color:#ADBAC7;">        </span><span style="color:#DCBDFB;">TextView</span><span style="color:#ADBAC7;"> {</span></span>
<span class="line"><span style="color:#ADBAC7;">            text </span><span style="color:#F47067;">=</span><span style="color:#ADBAC7;"> </span><span style="color:#96D0FF;">&quot;Hello, World!&quot;</span></span>
<span class="line"><span style="color:#ADBAC7;">        }</span></span>
<span class="line"><span style="color:#ADBAC7;">    }</span></span>
<span class="line"><span style="color:#ADBAC7;">}</span></span>
<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><p>然后，将其设置到你想要显示的父布局或根布局上。</p><blockquote><p>示例如下</p></blockquote><div class="language-kotlin line-numbers-mode" data-ext="kt"><pre class="shiki github-dark-dimmed" style="background-color:#22272e;" tabindex="0"><code><span class="line"><span style="color:#768390;">// 假设这就是你的 Activity</span></span>
<span class="line"><span style="color:#F47067;">val</span><span style="color:#ADBAC7;"> activity: </span><span style="color:#F69D50;">Activity</span></span>
<span class="line"><span style="color:#768390;">// 实例化 Hikage 对象</span></span>
<span class="line"><span style="color:#F47067;">val</span><span style="color:#ADBAC7;"> hikage </span><span style="color:#F47067;">=</span><span style="color:#ADBAC7;"> myLayout.</span><span style="color:#DCBDFB;">create</span><span style="color:#ADBAC7;">(activity)</span></span>
<span class="line"><span style="color:#768390;">// 得到根布局</span></span>
<span class="line"><span style="color:#F47067;">val</span><span style="color:#ADBAC7;"> root </span><span style="color:#F47067;">=</span><span style="color:#ADBAC7;"> hikage.root</span></span>
<span class="line"><span style="color:#768390;">// 设置为 Activity 的内容视图</span></span>
<span class="line"><span style="color:#ADBAC7;">activity.</span><span style="color:#DCBDFB;">setContentView</span><span style="color:#ADBAC7;">(root)</span></span>
<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><p>这样我们就完成了一个简单的布局创建与设置。</p><h3 id="布局约定" tabindex="-1"><a class="header-anchor" href="#布局约定" aria-hidden="true">#</a> 布局约定</h3><p>Hikage 的布局基本元素基于 Android 原生的 <code>View</code> 组件，所有的布局元素都可以直接使用 Android 原生的 <code>View</code> 组件进行创建。</p><p>所有布局的创建过程都会被限定在指定的作用域 <code>Hikage.Performer</code> 中，它被称为布局的 “演奏者”，即饰演布局的角色对象，这个对象可以通过以下几种方式创建并维护。</p><h4 id="hikageable" tabindex="-1"><a class="header-anchor" href="#hikageable" aria-hidden="true">#</a> Hikageable</h4><p>正如 <a href="#%E5%9F%BA%E6%9C%AC%E7%94%A8%E6%B3%95">基本用法</a> 所示，<code>Hikageable</code> 可以直接创建一个 <code>Hikage.Delegate</code> 或 <code>Hikage</code> 对象，在 DSL 中，你可以得到 <code>Hikage.Performer</code> 对象对布局内容进行创建。</p><p>第一种方案，在任意地方创建。</p><blockquote><p>示例如下</p></blockquote><div class="language-kotlin line-numbers-mode" data-ext="kt"><pre class="shiki github-dark-dimmed" style="background-color:#22272e;" tabindex="0"><code><span class="line"><span style="color:#768390;">// myLayout 是 Hikage.Delegate 对象</span></span>
<span class="line"><span style="color:#F47067;">val</span><span style="color:#ADBAC7;"> myLayout </span><span style="color:#F47067;">=</span><span style="color:#ADBAC7;"> </span><span style="color:#DCBDFB;">Hikageable</span><span style="color:#ADBAC7;"> {</span></span>
<span class="line"><span style="color:#ADBAC7;">    </span><span style="color:#768390;">// ...</span></span>
<span class="line"><span style="color:#ADBAC7;">}</span></span>
<span class="line"><span style="color:#768390;">// 假设这就是你的 Context</span></span>
<span class="line"><span style="color:#F47067;">val</span><span style="color:#ADBAC7;"> context: </span><span style="color:#F69D50;">Context</span></span>
<span class="line"><span style="color:#768390;">// 在需要 Context 的地方实例化 Hikage 对象</span></span>
<span class="line"><span style="color:#F47067;">val</span><span style="color:#ADBAC7;"> hikage </span><span style="color:#F47067;">=</span><span style="color:#ADBAC7;"> myLayout.</span><span style="color:#DCBDFB;">create</span><span style="color:#ADBAC7;">(context)</span></span>
<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><p>第二种方案，在存在 <code>Context</code> 的地方直接创建。</p><blockquote><p>示例如下</p></blockquote><div class="language-kotlin line-numbers-mode" data-ext="kt"><pre class="shiki github-dark-dimmed" style="background-color:#22272e;" tabindex="0"><code><span class="line"><span style="color:#768390;">// 假设这就是你的 Context</span></span>
<span class="line"><span style="color:#F47067;">val</span><span style="color:#ADBAC7;"> context: </span><span style="color:#F69D50;">Context</span></span>
<span class="line"><span style="color:#768390;">// 创建布局，myLayout 是 Hikage 对象</span></span>
<span class="line"><span style="color:#F47067;">val</span><span style="color:#ADBAC7;"> myLayout </span><span style="color:#F47067;">=</span><span style="color:#ADBAC7;"> </span><span style="color:#DCBDFB;">Hikageable</span><span style="color:#ADBAC7;">(context) {</span></span>
<span class="line"><span style="color:#ADBAC7;">    </span><span style="color:#768390;">// ...</span></span>
<span class="line"><span style="color:#ADBAC7;">}</span></span>
<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h4 id="hikagebuilder" tabindex="-1"><a class="header-anchor" href="#hikagebuilder" aria-hidden="true">#</a> HikageBuilder</h4><p>除了上述的方式以外，你还可以维护一个 <code>HikageBuilder</code> 对象来预创建布局。</p><p>首先，我们需要创建一个 <code>HikageBuilder</code> 对象并定义为单例。</p><blockquote><p>示例如下</p></blockquote><div class="language-kotlin line-numbers-mode" data-ext="kt"><pre class="shiki github-dark-dimmed" style="background-color:#22272e;" tabindex="0"><code><span class="line"><span style="color:#F47067;">object</span><span style="color:#ADBAC7;"> </span><span style="color:#F69D50;">MyLayout</span><span style="color:#ADBAC7;"> : </span><span style="color:#F69D50;">HikageBuilder</span><span style="color:#ADBAC7;"> {</span></span>
<span class="line"></span>
<span class="line"><span style="color:#ADBAC7;">    </span><span style="color:#F47067;">override</span><span style="color:#ADBAC7;"> </span><span style="color:#F47067;">fun</span><span style="color:#ADBAC7;"> </span><span style="color:#DCBDFB;">build</span><span style="color:#ADBAC7;">() </span><span style="color:#F47067;">=</span><span style="color:#ADBAC7;"> </span><span style="color:#DCBDFB;">Hikageable</span><span style="color:#ADBAC7;"> {</span></span>
<span class="line"><span style="color:#ADBAC7;">        </span><span style="color:#768390;">// ...</span></span>
<span class="line"><span style="color:#ADBAC7;">    }</span></span>
<span class="line"><span style="color:#ADBAC7;">}</span></span>
<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><p>然后，在需要的地方使用它，可以有如下两种方案。</p><p>第一种方案，直接使用 <code>build</code> 创建 <code>Hikage.Delegate</code> 对象。</p><blockquote><p>示例如下</p></blockquote><div class="language-kotlin line-numbers-mode" data-ext="kt"><pre class="shiki github-dark-dimmed" style="background-color:#22272e;" tabindex="0"><code><span class="line"><span style="color:#768390;">// myLayout 是 Hikage.Delegate 对象</span></span>
<span class="line"><span style="color:#F47067;">val</span><span style="color:#ADBAC7;"> myLayout </span><span style="color:#F47067;">=</span><span style="color:#ADBAC7;"> MyLayout.</span><span style="color:#DCBDFB;">build</span><span style="color:#ADBAC7;">()</span></span>
<span class="line"><span style="color:#768390;">// 假设这就是你的 Context</span></span>
<span class="line"><span style="color:#F47067;">val</span><span style="color:#ADBAC7;"> context: </span><span style="color:#F69D50;">Context</span></span>
<span class="line"><span style="color:#768390;">// 在需要 Context 的地方实例化 Hikage 对象</span></span>
<span class="line"><span style="color:#F47067;">val</span><span style="color:#ADBAC7;"> hikage </span><span style="color:#F47067;">=</span><span style="color:#ADBAC7;"> myLayout.</span><span style="color:#DCBDFB;">create</span><span style="color:#ADBAC7;">(context)</span></span>
<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><p>第二种方案，使用 <code>Context.lazyHikage</code> 创建 <code>Hikage</code> 委托对象。</p><p>例如，我们可以在 <code>Activity</code> 中像 <code>ViewBinding</code> 一样使用它。</p><blockquote><p>示例如下</p></blockquote><div class="language-kotlin line-numbers-mode" data-ext="kt"><pre class="shiki github-dark-dimmed" style="background-color:#22272e;" tabindex="0"><code><span class="line"><span style="color:#F47067;">class</span><span style="color:#ADBAC7;"> </span><span style="color:#F69D50;">MyActivity</span><span style="color:#ADBAC7;"> : </span><span style="color:#F69D50;">AppCompatActivity</span><span style="color:#ADBAC7;">() {</span></span>
<span class="line"></span>
<span class="line"><span style="color:#ADBAC7;">    </span><span style="color:#F47067;">private</span><span style="color:#ADBAC7;"> </span><span style="color:#F47067;">val</span><span style="color:#ADBAC7;"> myLayout </span><span style="color:#F47067;">by</span><span style="color:#ADBAC7;"> </span><span style="color:#DCBDFB;">lazyHikage</span><span style="color:#ADBAC7;">(MyLayout)</span></span>
<span class="line"></span>
<span class="line"><span style="color:#ADBAC7;">    </span><span style="color:#F47067;">override</span><span style="color:#ADBAC7;"> </span><span style="color:#F47067;">fun</span><span style="color:#ADBAC7;"> </span><span style="color:#DCBDFB;">onCreate</span><span style="color:#ADBAC7;">(savedInstanceState: </span><span style="color:#F69D50;">Bundle</span><span style="color:#ADBAC7;">?) {</span></span>
<span class="line"><span style="color:#ADBAC7;">        </span><span style="color:#6CB6FF;">super</span><span style="color:#ADBAC7;">.</span><span style="color:#DCBDFB;">onCreate</span><span style="color:#ADBAC7;">(savedInstanceState)</span></span>
<span class="line"><span style="color:#ADBAC7;">        </span><span style="color:#768390;">// 得到根布局</span></span>
<span class="line"><span style="color:#ADBAC7;">        </span><span style="color:#F47067;">val</span><span style="color:#ADBAC7;"> root </span><span style="color:#F47067;">=</span><span style="color:#ADBAC7;"> myLayout.root</span></span>
<span class="line"><span style="color:#ADBAC7;">        </span><span style="color:#768390;">// 设置为 Activity 的内容视图</span></span>
<span class="line"><span style="color:#ADBAC7;">        </span><span style="color:#DCBDFB;">setContentView</span><span style="color:#ADBAC7;">(root)</span></span>
<span class="line"><span style="color:#ADBAC7;">    }</span></span>
<span class="line"><span style="color:#ADBAC7;">}</span></span>
<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h3 id="基本布局组件" tabindex="-1"><a class="header-anchor" href="#基本布局组件" aria-hidden="true">#</a> 基本布局组件</h3><p>Hikage 采用与 Jetpack Compose 一致的函数式创建组件方案，它的布局使用两种基础组件完成，<code>View</code> 和 <code>ViewGroup</code> 函数， 它们分别对应于 Android 原生基于 <code>View</code> 和 <code>ViewGroup</code> 的组件。</p><h4 id="view" tabindex="-1"><a class="header-anchor" href="#view" aria-hidden="true">#</a> View</h4><p><code>View</code> 函数的基础参数为以下三个，使用泛型定义创建的 <code>View</code> 对象类型。</p><p>如果不声明泛型类型，默认使用 <code>android.view.View</code> 作为创建的对象类型。</p><table><thead><tr><th>参数名称</th><th>描述</th></tr></thead><tbody><tr><td><code>lparams</code></td><td>布局参数，即 <code>ViewGroup.LayoutParams</code>，使用 <code>LayoutParams</code> 进行创建</td></tr><tr><td><code>id</code></td><td>用于查找已创建对象的 ID，使用字符串定义</td></tr><tr><td><code>init</code></td><td><code>View</code> 的初始化方法体，作为最后一位 DSL 参数传入</td></tr></tbody></table><blockquote><p>示例如下</p></blockquote><div class="language-kotlin line-numbers-mode" data-ext="kt"><pre class="shiki github-dark-dimmed" style="background-color:#22272e;" tabindex="0"><code><span class="line"><span style="color:#DCBDFB;">View</span><span style="color:#ADBAC7;">&lt;</span><span style="color:#F69D50;">TextView</span><span style="color:#ADBAC7;">&gt;(</span></span>
<span class="line"><span style="color:#ADBAC7;">    lparams </span><span style="color:#F47067;">=</span><span style="color:#ADBAC7;"> </span><span style="color:#DCBDFB;">LayoutParams</span><span style="color:#ADBAC7;">(),</span></span>
<span class="line"><span style="color:#ADBAC7;">    id </span><span style="color:#F47067;">=</span><span style="color:#ADBAC7;"> </span><span style="color:#96D0FF;">&quot;my_text_view&quot;</span></span>
<span class="line"><span style="color:#ADBAC7;">) {</span></span>
<span class="line"><span style="color:#ADBAC7;">    text </span><span style="color:#F47067;">=</span><span style="color:#ADBAC7;"> </span><span style="color:#96D0FF;">&quot;Hello, World!&quot;</span></span>
<span class="line"><span style="color:#ADBAC7;">    textSize </span><span style="color:#F47067;">=</span><span style="color:#ADBAC7;"> </span><span style="color:#6CB6FF;">16f</span></span>
<span class="line"><span style="color:#ADBAC7;">    gravity </span><span style="color:#F47067;">=</span><span style="color:#ADBAC7;"> Gravity.CENTER</span></span>
<span class="line"><span style="color:#ADBAC7;">}</span></span>
<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h4 id="viewgroup" tabindex="-1"><a class="header-anchor" href="#viewgroup" aria-hidden="true">#</a> ViewGroup</h4><p><code>ViewGroup</code> 函数的基础参数为四个，比较于 <code>View</code> 函数多了一个 <code>performer</code> 参数。</p><p>它必须声明一个泛型类型，因为 <code>ViewGroup</code> 是抽象类，需要一个具体的实现类。</p><p><code>ViewGroup</code> 额外提供一个基于 <code>ViewGroup.LayoutParams</code> 的泛型参数，用于为子布局提供布局参数，不声明时默认使用 <code>ViewGroup.LayoutParams</code>。</p><table><thead><tr><th>参数名称</th><th>描述</th></tr></thead><tbody><tr><td><code>lparams</code></td><td>布局参数，即 <code>ViewGroup.LayoutParams</code>，使用 <code>LayoutParams</code> 进行创建</td></tr><tr><td><code>id</code></td><td>用于查找已创建对象的 ID，使用字符串定义</td></tr><tr><td><code>init</code></td><td><code>ViewGroup</code> 的初始化方法体，作为 DSL 参数传入</td></tr><tr><td><code>performer</code></td><td><code>Hikage.Performer</code> 对象，作为最后一位 DSL 参数传入</td></tr></tbody></table><p><code>performer</code> 参数的作用是向下传递新的 <code>Hikage.Performer</code> 对象，作为子布局的创建者。</p><blockquote><p>示例如下</p></blockquote><div class="language-kotlin line-numbers-mode" data-ext="kt"><pre class="shiki github-dark-dimmed" style="background-color:#22272e;" tabindex="0"><code><span class="line"><span style="color:#DCBDFB;">ViewGroup</span><span style="color:#ADBAC7;">&lt;</span><span style="color:#F69D50;">LinearLayout</span><span style="color:#ADBAC7;">, </span><span style="color:#F69D50;">LinearLayout</span><span style="color:#ADBAC7;">.</span><span style="color:#F69D50;">LayoutParams</span><span style="color:#ADBAC7;">&gt;(</span></span>
<span class="line"><span style="color:#ADBAC7;">    lparams </span><span style="color:#F47067;">=</span><span style="color:#ADBAC7;"> </span><span style="color:#DCBDFB;">LayoutParams</span><span style="color:#ADBAC7;">(),</span></span>
<span class="line"><span style="color:#ADBAC7;">    id </span><span style="color:#F47067;">=</span><span style="color:#ADBAC7;"> </span><span style="color:#96D0FF;">&quot;my_linear_layout&quot;</span><span style="color:#ADBAC7;">,</span></span>
<span class="line"><span style="color:#ADBAC7;">    </span><span style="color:#768390;">// 初始化方法体将在这里使用 \`init\` 体现</span></span>
<span class="line"><span style="color:#ADBAC7;">    init </span><span style="color:#F47067;">=</span><span style="color:#ADBAC7;"> {</span></span>
<span class="line"><span style="color:#ADBAC7;">        orientation </span><span style="color:#F47067;">=</span><span style="color:#ADBAC7;"> LinearLayout.VERTICAL</span></span>
<span class="line"><span style="color:#ADBAC7;">        gravity </span><span style="color:#F47067;">=</span><span style="color:#ADBAC7;"> Gravity.CENTER</span></span>
<span class="line"><span style="color:#ADBAC7;">    }</span></span>
<span class="line"><span style="color:#ADBAC7;">) {</span></span>
<span class="line"><span style="color:#ADBAC7;">    </span><span style="color:#768390;">// 可在这里继续创建子布局</span></span>
<span class="line"><span style="color:#ADBAC7;">    </span><span style="color:#DCBDFB;">View</span><span style="color:#ADBAC7;">()</span></span>
<span class="line"><span style="color:#ADBAC7;">}</span></span>
<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h4 id="layoutparams" tabindex="-1"><a class="header-anchor" href="#layoutparams" aria-hidden="true">#</a> LayoutParams</h4><p>Hikage 中的布局均可使用 <code>LayoutParams</code> 函数设置布局参数，你可以使用以下参数创建它。</p><table><thead><tr><th>参数名称</th><th>描述</th></tr></thead><tbody><tr><td><code>width</code></td><td>手动指定布局宽度</td></tr><tr><td><code>height</code></td><td>手动指定布局高度</td></tr><tr><td><code>matchParent</code></td><td>是否使用 <code>MATCH_PARENT</code> 作为布局宽度和高度</td></tr><tr><td><code>wrapContent</code></td><td>是否使用 <code>WRAP_CONTENT</code> 作为布局宽度和高度</td></tr><tr><td><code>widthMatchParent</code></td><td>仅设置宽度为 <code>MATCH_PARENT</code></td></tr><tr><td><code>heightMatchParent</code></td><td>仅设置高度为 <code>MATCH_PARENT</code></td></tr><tr><td><code>body</code></td><td>布局参数的初始化方法体，作为最后一位 DSL 参数传入</td></tr></tbody></table><p>在你不设置 <code>LayoutParams</code> 对象或不指定 <code>width</code> 和 <code>height</code> 时，Hikage 会自动使用 <code>WRAP_CONTENT</code> 作为布局参数。</p><p><code>body</code> 方法体的类型来源于上层 <a href="#viewgroup">ViewGroup</a> 提供的第二位泛型参数。</p><blockquote><p>示例如下</p></blockquote><div class="language-kotlin line-numbers-mode" data-ext="kt"><pre class="shiki github-dark-dimmed" style="background-color:#22272e;" tabindex="0"><code><span class="line"><span style="color:#DCBDFB;">View</span><span style="color:#ADBAC7;">(</span></span>
<span class="line"><span style="color:#ADBAC7;">    </span><span style="color:#768390;">// 假设上层提供的布局参数类型为 LinearLayout.LayoutParams</span></span>
<span class="line"><span style="color:#ADBAC7;">    lparams </span><span style="color:#F47067;">=</span><span style="color:#ADBAC7;"> </span><span style="color:#DCBDFB;">LayoutParams</span><span style="color:#ADBAC7;">(width </span><span style="color:#F47067;">=</span><span style="color:#ADBAC7;"> </span><span style="color:#6CB6FF;">100</span><span style="color:#ADBAC7;">.dp) {</span></span>
<span class="line"><span style="color:#ADBAC7;">        topMargin </span><span style="color:#F47067;">=</span><span style="color:#ADBAC7;"> </span><span style="color:#6CB6FF;">20</span><span style="color:#ADBAC7;">.dp</span></span>
<span class="line"><span style="color:#ADBAC7;">    }</span></span>
<span class="line"><span style="color:#ADBAC7;">)</span></span>
<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><p>如果你只需要一个横向填充的布局，可以直接使用 <code>widthMatchParent = true</code>。</p><blockquote><p>示例如下</p></blockquote><div class="language-kotlin line-numbers-mode" data-ext="kt"><pre class="shiki github-dark-dimmed" style="background-color:#22272e;" tabindex="0"><code><span class="line"><span style="color:#DCBDFB;">View</span><span style="color:#ADBAC7;">(</span></span>
<span class="line"><span style="color:#ADBAC7;">    lparams </span><span style="color:#F47067;">=</span><span style="color:#ADBAC7;"> </span><span style="color:#DCBDFB;">LayoutParams</span><span style="color:#ADBAC7;">(widthMatchParent </span><span style="color:#F47067;">=</span><span style="color:#ADBAC7;"> </span><span style="color:#6CB6FF;">true</span><span style="color:#ADBAC7;">)</span></span>
<span class="line"><span style="color:#ADBAC7;">)</span></span>
<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h4 id="layout" tabindex="-1"><a class="header-anchor" href="#layout" aria-hidden="true">#</a> Layout</h4><p>Hikage 支持引用第三方布局，你可以传入 XML 布局资源 ID、其它 Hikage 对象以及 <code>View</code> 对象，甚至是 <code>ViewBinding</code>。</p><blockquote><p>示例如下</p></blockquote><div class="language-kotlin line-numbers-mode" data-ext="kt"><pre class="shiki github-dark-dimmed" style="background-color:#22272e;" tabindex="0"><code><span class="line"><span style="color:#DCBDFB;">ViewGroup</span><span style="color:#ADBAC7;">&lt;...&gt; {</span></span>
<span class="line"><span style="color:#ADBAC7;">    </span><span style="color:#768390;">// 引用 XML 布局资源 ID</span></span>
<span class="line"><span style="color:#ADBAC7;">    </span><span style="color:#DCBDFB;">Layout</span><span style="color:#ADBAC7;">(R.layout.my_layout)</span></span>
<span class="line"><span style="color:#ADBAC7;">    </span><span style="color:#768390;">// 引用 ViewBinding</span></span>
<span class="line"><span style="color:#ADBAC7;">    </span><span style="color:#DCBDFB;">Layout</span><span style="color:#ADBAC7;">&lt;</span><span style="color:#F69D50;">MyLayoutBinding</span><span style="color:#ADBAC7;">&gt;()</span></span>
<span class="line"><span style="color:#ADBAC7;">    </span><span style="color:#768390;">// 引用另一个 Hikage 或 Hikage.Delegate 对象</span></span>
<span class="line"><span style="color:#ADBAC7;">    </span><span style="color:#DCBDFB;">Layout</span><span style="color:#ADBAC7;">(myLayout)</span></span>
<span class="line"><span style="color:#ADBAC7;">}</span></span>
<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h3 id="定位布局组件" tabindex="-1"><a class="header-anchor" href="#定位布局组件" aria-hidden="true">#</a> 定位布局组件</h3><p>Hikage 支持使用 <code>id</code> 定位组件，在上面的示例中，我们使用了 <code>id</code> 参数设置了组件的 ID。</p><p>在设置 ID 后，你可以使用 <code>Hikage.get</code> 方法获取它们。</p><blockquote><p>示例如下</p></blockquote><div class="language-kotlin line-numbers-mode" data-ext="kt"><pre class="shiki github-dark-dimmed" style="background-color:#22272e;" tabindex="0"><code><span class="line"><span style="color:#F47067;">val</span><span style="color:#ADBAC7;"> myLayout </span><span style="color:#F47067;">=</span><span style="color:#ADBAC7;"> </span><span style="color:#DCBDFB;">Hikageable</span><span style="color:#ADBAC7;"> {</span></span>
<span class="line"><span style="color:#ADBAC7;">    </span><span style="color:#DCBDFB;">View</span><span style="color:#ADBAC7;">&lt;</span><span style="color:#F69D50;">TextView</span><span style="color:#ADBAC7;">&gt;(id </span><span style="color:#F47067;">=</span><span style="color:#ADBAC7;"> </span><span style="color:#96D0FF;">&quot;my_text_view&quot;</span><span style="color:#ADBAC7;">) {</span></span>
<span class="line"><span style="color:#ADBAC7;">        text </span><span style="color:#F47067;">=</span><span style="color:#ADBAC7;"> </span><span style="color:#96D0FF;">&quot;Hello, World!&quot;</span></span>
<span class="line"><span style="color:#ADBAC7;">    }</span></span>
<span class="line"><span style="color:#ADBAC7;">}</span></span>
<span class="line"><span style="color:#768390;">// 假设这就是你的 Context</span></span>
<span class="line"><span style="color:#F47067;">val</span><span style="color:#ADBAC7;"> context: </span><span style="color:#F69D50;">Context</span></span>
<span class="line"><span style="color:#768390;">// 在需要 Context 的地方实例化 Hikage 对象</span></span>
<span class="line"><span style="color:#F47067;">val</span><span style="color:#ADBAC7;"> hikage </span><span style="color:#F47067;">=</span><span style="color:#ADBAC7;"> myLayout.</span><span style="color:#DCBDFB;">create</span><span style="color:#ADBAC7;">(context)</span></span>
<span class="line"><span style="color:#768390;">// 获取指定的组件，返回 View 类型</span></span>
<span class="line"><span style="color:#F47067;">val</span><span style="color:#ADBAC7;"> textView </span><span style="color:#F47067;">=</span><span style="color:#ADBAC7;"> hikage[</span><span style="color:#96D0FF;">&quot;my_text_view&quot;</span><span style="color:#ADBAC7;">]</span></span>
<span class="line"><span style="color:#768390;">// 获取指定的组件并声明组件类型</span></span>
<span class="line"><span style="color:#F47067;">val</span><span style="color:#ADBAC7;"> textView </span><span style="color:#F47067;">=</span><span style="color:#ADBAC7;"> hikage.</span><span style="color:#DCBDFB;">get</span><span style="color:#ADBAC7;">&lt;</span><span style="color:#F69D50;">TextView</span><span style="color:#ADBAC7;">&gt;(</span><span style="color:#96D0FF;">&quot;my_text_view&quot;</span><span style="color:#ADBAC7;">)</span></span>
<span class="line"><span style="color:#768390;">// 如果不确定 ID 是否存在，可以使用 \`getOrNull\` 方法</span></span>
<span class="line"><span style="color:#F47067;">val</span><span style="color:#ADBAC7;"> textView </span><span style="color:#F47067;">=</span><span style="color:#ADBAC7;"> hikage.</span><span style="color:#DCBDFB;">getOrNull</span><span style="color:#ADBAC7;">&lt;</span><span style="color:#F69D50;">TextView</span><span style="color:#ADBAC7;">&gt;(</span><span style="color:#96D0FF;">&quot;my_text_view&quot;</span><span style="color:#ADBAC7;">)</span></span>
<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h3 id="自定义布局组件" tabindex="-1"><a class="header-anchor" href="#自定义布局组件" aria-hidden="true">#</a> 自定义布局组件</h3>`,69),u=l(`<blockquote><p>示例如下</p></blockquote><div class="language-kotlin line-numbers-mode" data-ext="kt"><pre class="shiki github-dark-dimmed" style="background-color:#22272e;" tabindex="0"><code><span class="line"><span style="color:#DCBDFB;">LinearLayout</span><span style="color:#ADBAC7;">(</span></span>
<span class="line"><span style="color:#ADBAC7;">    lparams </span><span style="color:#F47067;">=</span><span style="color:#ADBAC7;"> </span><span style="color:#DCBDFB;">LayoutParams</span><span style="color:#ADBAC7;">(),</span></span>
<span class="line"><span style="color:#ADBAC7;">    id </span><span style="color:#F47067;">=</span><span style="color:#ADBAC7;"> </span><span style="color:#96D0FF;">&quot;my_linear_layout&quot;</span><span style="color:#ADBAC7;">,</span></span>
<span class="line"><span style="color:#ADBAC7;">    init </span><span style="color:#F47067;">=</span><span style="color:#ADBAC7;"> {</span></span>
<span class="line"><span style="color:#ADBAC7;">        orientation </span><span style="color:#F47067;">=</span><span style="color:#ADBAC7;"> LinearLayout.VERTICAL</span></span>
<span class="line"><span style="color:#ADBAC7;">        gravity </span><span style="color:#F47067;">=</span><span style="color:#ADBAC7;"> Gravity.CENTER</span></span>
<span class="line"><span style="color:#ADBAC7;">    }</span></span>
<span class="line"><span style="color:#ADBAC7;">) {</span></span>
<span class="line"><span style="color:#ADBAC7;">    </span><span style="color:#DCBDFB;">TextView</span><span style="color:#ADBAC7;">(</span></span>
<span class="line"><span style="color:#ADBAC7;">        lparams </span><span style="color:#F47067;">=</span><span style="color:#ADBAC7;"> </span><span style="color:#DCBDFB;">LayoutParams</span><span style="color:#ADBAC7;">(),</span></span>
<span class="line"><span style="color:#ADBAC7;">        id </span><span style="color:#F47067;">=</span><span style="color:#ADBAC7;"> </span><span style="color:#96D0FF;">&quot;my_text_view&quot;</span></span>
<span class="line"><span style="color:#ADBAC7;">    ) {</span></span>
<span class="line"><span style="color:#ADBAC7;">        text </span><span style="color:#F47067;">=</span><span style="color:#ADBAC7;"> </span><span style="color:#96D0FF;">&quot;Hello, World!&quot;</span></span>
<span class="line"><span style="color:#ADBAC7;">        textSize </span><span style="color:#F47067;">=</span><span style="color:#ADBAC7;"> </span><span style="color:#6CB6FF;">16f</span></span>
<span class="line"><span style="color:#ADBAC7;">        gravity </span><span style="color:#F47067;">=</span><span style="color:#ADBAC7;"> Gravity.CENTER</span></span>
<span class="line"><span style="color:#ADBAC7;">    }</span></span>
<span class="line"><span style="color:#ADBAC7;">}</span></span>
<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><p>初始化后的 <code>View</code> 或 <code>ViewGroup</code> 对象会返回其自身对象类型的实例，你可以在接下来的布局中使用它们。</p><blockquote><p>示例如下</p></blockquote><div class="language-kotlin line-numbers-mode" data-ext="kt"><pre class="shiki github-dark-dimmed" style="background-color:#22272e;" tabindex="0"><code><span class="line"><span style="color:#F47067;">val</span><span style="color:#ADBAC7;"> textView </span><span style="color:#F47067;">=</span><span style="color:#ADBAC7;"> </span><span style="color:#DCBDFB;">TextView</span><span style="color:#ADBAC7;"> {</span></span>
<span class="line"><span style="color:#ADBAC7;">    text </span><span style="color:#F47067;">=</span><span style="color:#ADBAC7;"> </span><span style="color:#96D0FF;">&quot;Hello, World!&quot;</span></span>
<span class="line"><span style="color:#ADBAC7;">    textSize </span><span style="color:#F47067;">=</span><span style="color:#ADBAC7;"> </span><span style="color:#6CB6FF;">16f</span></span>
<span class="line"><span style="color:#ADBAC7;">    gravity </span><span style="color:#F47067;">=</span><span style="color:#ADBAC7;"> Gravity.CENTER</span></span>
<span class="line"><span style="color:#ADBAC7;">}</span></span>
<span class="line"><span style="color:#DCBDFB;">Button</span><span style="color:#ADBAC7;"> {</span></span>
<span class="line"><span style="color:#ADBAC7;">    text </span><span style="color:#F47067;">=</span><span style="color:#ADBAC7;"> </span><span style="color:#96D0FF;">&quot;Click Me!&quot;</span></span>
<span class="line"><span style="color:#ADBAC7;">    </span><span style="color:#DCBDFB;">setOnClickListener</span><span style="color:#ADBAC7;"> {</span></span>
<span class="line"><span style="color:#ADBAC7;">        </span><span style="color:#768390;">// 直接使用 textView 对象</span></span>
<span class="line"><span style="color:#ADBAC7;">        textView.text </span><span style="color:#F47067;">=</span><span style="color:#ADBAC7;"> </span><span style="color:#96D0FF;">&quot;Clicked!&quot;</span></span>
<span class="line"><span style="color:#ADBAC7;">    }</span></span>
<span class="line"><span style="color:#ADBAC7;">}</span></span>
<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><p>如果提供的组件不满足你的需求，你可以手动创建自己的组件。</p><blockquote><p>示例如下</p></blockquote><div class="language-kotlin line-numbers-mode" data-ext="kt"><pre class="shiki github-dark-dimmed" style="background-color:#22272e;" tabindex="0"><code><span class="line"><span style="color:#768390;">// 假设你已经定义好了你的自定义组件</span></span>
<span class="line"><span style="color:#F47067;">class</span><span style="color:#ADBAC7;"> </span><span style="color:#F69D50;">MyCustomView</span><span style="color:#ADBAC7;">(context: </span><span style="color:#F69D50;">Context</span><span style="color:#ADBAC7;">, attrs: </span><span style="color:#F69D50;">AttributeSet</span><span style="color:#ADBAC7;">? </span><span style="color:#F47067;">=</span><span style="color:#ADBAC7;"> </span><span style="color:#6CB6FF;">null</span><span style="color:#ADBAC7;">) : </span><span style="color:#F69D50;">View</span><span style="color:#ADBAC7;">(</span><span style="color:#F69D50;">context</span><span style="color:#ADBAC7;">, </span><span style="color:#F69D50;">attrs</span><span style="color:#ADBAC7;">) {</span></span>
<span class="line"><span style="color:#ADBAC7;">    </span><span style="color:#768390;">// ...</span></span>
<span class="line"><span style="color:#ADBAC7;">}</span></span>
<span class="line"></span>
<span class="line"><span style="color:#768390;">// 下面，创建组件对应的函数</span></span>
<span class="line"><span style="color:#768390;">// 自定义组件必须声明此注解</span></span>
<span class="line"><span style="color:#768390;">// 声明组件的注解具有传染性，在每个用于构建布局的作用域中，都需要存在此注解</span></span>
<span class="line"><span style="color:#F69D50;">@Hikageable</span></span>
<span class="line"><span style="color:#768390;">// 函数的命名可以随意，但是建议使用大驼峰命名</span></span>
<span class="line"><span style="color:#768390;">// 函数的签名部分需要固定声明为 \`inline fun &lt;reified LP : ViewGroup.LayoutParams&gt; Hikage.Performer&lt;LP&gt;\`</span></span>
<span class="line"><span style="color:#F47067;">inline</span><span style="color:#ADBAC7;"> </span><span style="color:#F47067;">fun</span><span style="color:#ADBAC7;"> &lt;</span><span style="color:#F69D50;">reified</span><span style="color:#ADBAC7;"> </span><span style="color:#F69D50;">LP</span><span style="color:#ADBAC7;"> : </span><span style="color:#F69D50;">ViewGroup</span><span style="color:#ADBAC7;">.</span><span style="color:#F69D50;">LayoutParams</span><span style="color:#ADBAC7;">&gt; </span><span style="color:#F69D50;">Hikage</span><span style="color:#ADBAC7;">.</span><span style="color:#DCBDFB;">Performer</span><span style="color:#F47067;">&lt;</span><span style="color:#ADBAC7;">LP</span><span style="color:#F47067;">&gt;</span><span style="color:#ADBAC7;">.</span><span style="color:#DCBDFB;">MyCustomView</span><span style="color:#ADBAC7;">(</span></span>
<span class="line"><span style="color:#ADBAC7;">    lparams: </span><span style="color:#F69D50;">Hikage</span><span style="color:#ADBAC7;">.LayoutParams? </span><span style="color:#F47067;">=</span><span style="color:#ADBAC7;"> </span><span style="color:#6CB6FF;">null</span><span style="color:#ADBAC7;">,</span></span>
<span class="line"><span style="color:#ADBAC7;">    id: </span><span style="color:#F69D50;">String</span><span style="color:#ADBAC7;">? </span><span style="color:#F47067;">=</span><span style="color:#ADBAC7;"> </span><span style="color:#6CB6FF;">null</span><span style="color:#ADBAC7;">,</span></span>
<span class="line"><span style="color:#ADBAC7;">    init: </span><span style="color:#F69D50;">HikageView</span><span style="color:#ADBAC7;">&lt;</span><span style="color:#F69D50;">MyCustomView</span><span style="color:#ADBAC7;">&gt; </span><span style="color:#F47067;">=</span><span style="color:#ADBAC7;"> {},</span></span>
<span class="line"><span style="color:#ADBAC7;">    </span><span style="color:#768390;">// 如果此组件是容器，可以声明一个 \`performer\` 参数</span></span>
<span class="line"><span style="color:#ADBAC7;">    </span><span style="color:#768390;">// performer: HikagePerformer&lt;LP&gt; = {}</span></span>
<span class="line"><span style="color:#ADBAC7;">) </span><span style="color:#F47067;">=</span><span style="color:#ADBAC7;"> </span><span style="color:#DCBDFB;">View</span><span style="color:#ADBAC7;">&lt;</span><span style="color:#F69D50;">MyCustomView</span><span style="color:#ADBAC7;">&gt;(lparams, id, init)</span></span>
<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div>`,8),D=l(`<h3 id="组合与拆分布局" tabindex="-1"><a class="header-anchor" href="#组合与拆分布局" aria-hidden="true">#</a> 组合与拆分布局</h3><p>在搭建 UI 时，我们通常会将可复用的布局作为组件来使用，如果你不想每一个部分都使用原生的自定义 <code>View</code> 将其分别定制，你可以直接将布局逻辑部分进行拆分。</p><p>Hikage 支持将布局拆分为多个部分进行组合，你可以在任何地方使用 <code>Hikageable</code> 函数创建一个新的 <code>Hikage.Delegate</code> 对象。</p><blockquote><p>示例如下</p></blockquote><div class="language-kotlin line-numbers-mode" data-ext="kt"><pre class="shiki github-dark-dimmed" style="background-color:#22272e;" tabindex="0"><code><span class="line"><span style="color:#768390;">// 假设这是你的主布局</span></span>
<span class="line"><span style="color:#F47067;">val</span><span style="color:#ADBAC7;"> mainLayout </span><span style="color:#F47067;">=</span><span style="color:#ADBAC7;"> </span><span style="color:#DCBDFB;">Hikageable</span><span style="color:#ADBAC7;"> {</span></span>
<span class="line"><span style="color:#ADBAC7;">    </span><span style="color:#DCBDFB;">LinearLayout</span><span style="color:#ADBAC7;">(</span></span>
<span class="line"><span style="color:#ADBAC7;">        lparams </span><span style="color:#F47067;">=</span><span style="color:#ADBAC7;"> </span><span style="color:#DCBDFB;">LayoutParams</span><span style="color:#ADBAC7;">(matchParent </span><span style="color:#F47067;">=</span><span style="color:#ADBAC7;"> </span><span style="color:#6CB6FF;">true</span><span style="color:#ADBAC7;">),</span></span>
<span class="line"><span style="color:#ADBAC7;">        init </span><span style="color:#F47067;">=</span><span style="color:#ADBAC7;"> {</span></span>
<span class="line"><span style="color:#ADBAC7;">            orientation </span><span style="color:#F47067;">=</span><span style="color:#ADBAC7;"> LinearLayout.VERTICAL</span></span>
<span class="line"><span style="color:#ADBAC7;">        }</span></span>
<span class="line"><span style="color:#ADBAC7;">    ) {</span></span>
<span class="line"><span style="color:#ADBAC7;">        </span><span style="color:#DCBDFB;">TextView</span><span style="color:#ADBAC7;"> {</span></span>
<span class="line"><span style="color:#ADBAC7;">            text </span><span style="color:#F47067;">=</span><span style="color:#ADBAC7;"> </span><span style="color:#96D0FF;">&quot;Hello, World!&quot;</span></span>
<span class="line"><span style="color:#ADBAC7;">        }</span></span>
<span class="line"><span style="color:#ADBAC7;">        </span><span style="color:#768390;">// 组合子布局</span></span>
<span class="line"><span style="color:#ADBAC7;">        </span><span style="color:#DCBDFB;">Layout</span><span style="color:#ADBAC7;">(subLayout)</span></span>
<span class="line"><span style="color:#ADBAC7;">    }</span></span>
<span class="line"><span style="color:#ADBAC7;">}</span></span>
<span class="line"><span style="color:#768390;">// 假设这是你的布局子模块</span></span>
<span class="line"><span style="color:#768390;">// 由于上层布局使用了 LinearLayout，所以你可以为子布局声明 LinearLayout.LayoutParams</span></span>
<span class="line"><span style="color:#F47067;">val</span><span style="color:#ADBAC7;"> subLayout </span><span style="color:#F47067;">=</span><span style="color:#ADBAC7;"> </span><span style="color:#DCBDFB;">Hikageable</span><span style="color:#ADBAC7;">&lt;</span><span style="color:#F69D50;">LinearLayout</span><span style="color:#ADBAC7;">.</span><span style="color:#F69D50;">LayoutParams</span><span style="color:#ADBAC7;">&gt; {</span></span>
<span class="line"><span style="color:#ADBAC7;">    </span><span style="color:#DCBDFB;">TextView</span><span style="color:#ADBAC7;">(</span></span>
<span class="line"><span style="color:#ADBAC7;">        lparams </span><span style="color:#F47067;">=</span><span style="color:#ADBAC7;"> </span><span style="color:#DCBDFB;">LayoutParams</span><span style="color:#ADBAC7;"> {</span></span>
<span class="line"><span style="color:#ADBAC7;">            topMargin </span><span style="color:#F47067;">=</span><span style="color:#ADBAC7;"> </span><span style="color:#6CB6FF;">16</span><span style="color:#ADBAC7;">.dp</span></span>
<span class="line"><span style="color:#ADBAC7;">        }</span></span>
<span class="line"><span style="color:#ADBAC7;">    ) {</span></span>
<span class="line"><span style="color:#ADBAC7;">        text </span><span style="color:#F47067;">=</span><span style="color:#ADBAC7;"> </span><span style="color:#96D0FF;">&quot;Hello, Sub World!&quot;</span></span>
<span class="line"><span style="color:#ADBAC7;">    }</span></span>
<span class="line"><span style="color:#ADBAC7;">}</span></span>
<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h3 id="状态管理" tabindex="-1"><a class="header-anchor" href="#状态管理" aria-hidden="true">#</a> 状态管理</h3><p>Hikage 拥有与 Jetpack Compose 类似的状态管理解决方法，它可以轻松地设置布局组件的状态监听。</p><p>Hikage 提供了两种状态，<code>NonNullState</code> 和 <code>NullableState</code>，分为持有非空和可空两种状态。</p><p>不同于 Jetpack Compose 的重组 (Recompose)，Hikage 不会重组，状态通过监听与回调生效。</p><p>你可以在如下场景中使用这两种状态。</p><blockquote><p>示例如下</p></blockquote><div class="language-kotlin line-numbers-mode" data-ext="kt"><pre class="shiki github-dark-dimmed" style="background-color:#22272e;" tabindex="0"><code><span class="line"><span style="color:#F47067;">val</span><span style="color:#ADBAC7;"> myLayout </span><span style="color:#F47067;">=</span><span style="color:#ADBAC7;"> </span><span style="color:#DCBDFB;">Hikageable</span><span style="color:#ADBAC7;"> {</span></span>
<span class="line"><span style="color:#ADBAC7;">    </span><span style="color:#768390;">// 声明一个非空可变状态</span></span>
<span class="line"><span style="color:#ADBAC7;">    </span><span style="color:#F47067;">val</span><span style="color:#ADBAC7;"> mTextState </span><span style="color:#F47067;">=</span><span style="color:#ADBAC7;"> </span><span style="color:#DCBDFB;">mutableStateOf</span><span style="color:#ADBAC7;">(</span><span style="color:#96D0FF;">&quot;Hello, World!&quot;</span><span style="color:#ADBAC7;">)</span></span>
<span class="line"><span style="color:#ADBAC7;">    </span><span style="color:#768390;">// 声明一个可空可变状态</span></span>
<span class="line"><span style="color:#ADBAC7;">    </span><span style="color:#F47067;">val</span><span style="color:#ADBAC7;"> mDrawState </span><span style="color:#F47067;">=</span><span style="color:#ADBAC7;"> </span><span style="color:#DCBDFB;">mutableStateOfNull</span><span style="color:#ADBAC7;">&lt;</span><span style="color:#F69D50;">Drawable</span><span style="color:#ADBAC7;">&gt;()</span></span>
<span class="line"><span style="color:#ADBAC7;">    </span><span style="color:#768390;">// 你可以将状态委托给一个变量</span></span>
<span class="line"><span style="color:#ADBAC7;">    </span><span style="color:#F47067;">var</span><span style="color:#ADBAC7;"> mText </span><span style="color:#F47067;">by</span><span style="color:#ADBAC7;"> mTextState</span></span>
<span class="line"><span style="color:#ADBAC7;">    </span><span style="color:#F47067;">var</span><span style="color:#ADBAC7;"> mDraw </span><span style="color:#F47067;">by</span><span style="color:#ADBAC7;"> mDrawState</span></span>
<span class="line"><span style="color:#ADBAC7;">    </span><span style="color:#DCBDFB;">LinearLayout</span><span style="color:#ADBAC7;">(</span></span>
<span class="line"><span style="color:#ADBAC7;">        lparams </span><span style="color:#F47067;">=</span><span style="color:#ADBAC7;"> </span><span style="color:#DCBDFB;">LayoutParams</span><span style="color:#ADBAC7;">(matchParent </span><span style="color:#F47067;">=</span><span style="color:#ADBAC7;"> </span><span style="color:#6CB6FF;">true</span><span style="color:#ADBAC7;">),</span></span>
<span class="line"><span style="color:#ADBAC7;">        init </span><span style="color:#F47067;">=</span><span style="color:#ADBAC7;"> {</span></span>
<span class="line"><span style="color:#ADBAC7;">            orientation </span><span style="color:#F47067;">=</span><span style="color:#ADBAC7;"> LinearLayout.VERTICAL</span></span>
<span class="line"><span style="color:#ADBAC7;">        }</span></span>
<span class="line"><span style="color:#ADBAC7;">    ) {</span></span>
<span class="line"><span style="color:#ADBAC7;">        </span><span style="color:#DCBDFB;">TextView</span><span style="color:#ADBAC7;"> {</span></span>
<span class="line"><span style="color:#ADBAC7;">            textSize </span><span style="color:#F47067;">=</span><span style="color:#ADBAC7;"> </span><span style="color:#6CB6FF;">16f</span></span>
<span class="line"><span style="color:#ADBAC7;">            gravity </span><span style="color:#F47067;">=</span><span style="color:#ADBAC7;"> Gravity.CENTER</span></span>
<span class="line"><span style="color:#ADBAC7;">            </span><span style="color:#768390;">// 设置 (绑定) 状态到文本</span></span>
<span class="line"><span style="color:#ADBAC7;">            </span><span style="color:#DCBDFB;">setState</span><span style="color:#ADBAC7;">(mTextState) {</span></span>
<span class="line"><span style="color:#ADBAC7;">                text </span><span style="color:#F47067;">=</span><span style="color:#ADBAC7;"> it</span></span>
<span class="line"><span style="color:#ADBAC7;">            }</span></span>
<span class="line"><span style="color:#ADBAC7;">        }</span></span>
<span class="line"><span style="color:#ADBAC7;">        </span><span style="color:#DCBDFB;">ImageView</span><span style="color:#ADBAC7;"> {</span></span>
<span class="line"><span style="color:#ADBAC7;">            </span><span style="color:#768390;">// 设置 (绑定) 状态到 Drawable</span></span>
<span class="line"><span style="color:#ADBAC7;">            </span><span style="color:#DCBDFB;">setState</span><span style="color:#ADBAC7;">(mDrawState) {</span></span>
<span class="line"><span style="color:#ADBAC7;">                </span><span style="color:#DCBDFB;">setImageDrawable</span><span style="color:#ADBAC7;">(it)</span></span>
<span class="line"><span style="color:#ADBAC7;">            }</span></span>
<span class="line"><span style="color:#ADBAC7;">        }</span></span>
<span class="line"><span style="color:#ADBAC7;">        </span><span style="color:#DCBDFB;">Button</span><span style="color:#ADBAC7;"> {</span></span>
<span class="line"><span style="color:#ADBAC7;">            text </span><span style="color:#F47067;">=</span><span style="color:#ADBAC7;"> </span><span style="color:#96D0FF;">&quot;Click Me!&quot;</span></span>
<span class="line"><span style="color:#ADBAC7;">            </span><span style="color:#DCBDFB;">setOnClickListener</span><span style="color:#ADBAC7;"> {</span></span>
<span class="line"><span style="color:#ADBAC7;">                </span><span style="color:#768390;">// 修改非空状态的值</span></span>
<span class="line"><span style="color:#ADBAC7;">                mText </span><span style="color:#F47067;">=</span><span style="color:#ADBAC7;"> </span><span style="color:#96D0FF;">&quot;Hello, Hikage!&quot;</span></span>
<span class="line"><span style="color:#ADBAC7;">                </span><span style="color:#768390;">// 修改可空状态的值</span></span>
<span class="line"><span style="color:#ADBAC7;">                mDraw </span><span style="color:#F47067;">=</span><span style="color:#ADBAC7;"> </span><span style="color:#DCBDFB;">drawableResource</span><span style="color:#ADBAC7;">(R.drawable.ic_my_drawable)</span></span>
<span class="line"><span style="color:#ADBAC7;">            }</span></span>
<span class="line"><span style="color:#ADBAC7;">        }</span></span>
<span class="line"><span style="color:#ADBAC7;">    }</span></span>
<span class="line"><span style="color:#ADBAC7;">}</span></span>
<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><p>在上面的示例中，我们使用 <code>mutableStateOf</code> 声明了一个非空状态 <code>mTextState</code>，它的初始值为 <code>&quot;Hello, World!&quot;</code>， 然后继续使用 <code>mutableStateOfNull</code> 声明了一个可空状态 <code>mDrawState</code>，它的初始值为 <code>null</code>。</p><p>在点击按钮时，我们修改 <code>mTextState</code> 的值为 <code>&quot;Hello, Hikage!&quot;</code>，<code>mDrawState</code> 的值为属性资源 <code>R.drawable.ic_my_drawable</code>， 这时 <code>TextView</code> 和 <code>ImageView</code> 的文本和图片将会自动更新。</p><h3 id="自定义布局装载器" tabindex="-1"><a class="header-anchor" href="#自定义布局装载器" aria-hidden="true">#</a> 自定义布局装载器</h3><p>Hikage 支持自定义布局装载器并同时兼容 <code>LayoutInflater.Factory2</code>，你可以通过以下方式自定义在 Hikage 布局装载过程中的事件和监听。</p><blockquote><p>示例如下</p></blockquote><div class="language-kotlin line-numbers-mode" data-ext="kt"><pre class="shiki github-dark-dimmed" style="background-color:#22272e;" tabindex="0"><code><span class="line"><span style="color:#F47067;">val</span><span style="color:#ADBAC7;"> factory </span><span style="color:#F47067;">=</span><span style="color:#ADBAC7;"> </span><span style="color:#DCBDFB;">HikageFactory</span><span style="color:#ADBAC7;"> { parent, base, context, params </span><span style="color:#F47067;">-&gt;</span></span>
<span class="line"><span style="color:#ADBAC7;">    </span><span style="color:#768390;">// 你可以在这里自定义布局装载器的行为</span></span>
<span class="line"><span style="color:#ADBAC7;">    </span><span style="color:#768390;">// 例如，使用你自己的方式创建一个新的 View 对象</span></span>
<span class="line"><span style="color:#ADBAC7;">    </span><span style="color:#768390;">// \`parent\` 为当前组件要添加到的 ViewGroup 对象，如果没有则为 \`null\`</span></span>
<span class="line"><span style="color:#ADBAC7;">    </span><span style="color:#768390;">// \`base\` 为上一个 HikageFactory 创建的 View 对象，如果没有则为 \`null\`</span></span>
<span class="line"><span style="color:#ADBAC7;">    </span><span style="color:#768390;">// \`params\` 对象中包含了组件 ID、AttributeSet 以及 View 的 Class 对象</span></span>
<span class="line"><span style="color:#ADBAC7;">    </span><span style="color:#F47067;">val</span><span style="color:#ADBAC7;"> view </span><span style="color:#F47067;">=</span><span style="color:#ADBAC7;"> MyLayoutFactory.</span><span style="color:#DCBDFB;">createView</span><span style="color:#ADBAC7;">(context, params)</span></span>
<span class="line"><span style="color:#ADBAC7;">    </span><span style="color:#768390;">// 你还可以在这里对创建的 View 对象进行初始化和设置</span></span>
<span class="line"><span style="color:#ADBAC7;">    view.</span><span style="color:#DCBDFB;">setBackgroundColor</span><span style="color:#ADBAC7;">(Color.RED)</span></span>
<span class="line"><span style="color:#ADBAC7;">    </span><span style="color:#768390;">// 返回创建的 View 对象</span></span>
<span class="line"><span style="color:#ADBAC7;">    </span><span style="color:#768390;">// 返回 \`null\` 将会使用默认的组件装载方式</span></span>
<span class="line"><span style="color:#ADBAC7;">    view</span></span>
<span class="line"><span style="color:#ADBAC7;">}</span></span>
<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><p>你还可以直接传入 <code>LayoutInflater</code> 对象以自动装载并使用其中的 <code>LayoutInflater.Factory2</code>。</p><blockquote><p>示例如下</p></blockquote><div class="language-kotlin line-numbers-mode" data-ext="kt"><pre class="shiki github-dark-dimmed" style="background-color:#22272e;" tabindex="0"><code><span class="line"><span style="color:#768390;">// 假设这就是你的 LayoutInflater 对象</span></span>
<span class="line"><span style="color:#F47067;">val</span><span style="color:#ADBAC7;"> layoutInflater: </span><span style="color:#F69D50;">LayoutInflater</span></span>
<span class="line"><span style="color:#768390;">// 通过 LayoutInflater 创建 HikageFactory 对象</span></span>
<span class="line"><span style="color:#F47067;">val</span><span style="color:#ADBAC7;"> factory </span><span style="color:#F47067;">=</span><span style="color:#ADBAC7;"> </span><span style="color:#DCBDFB;">HikageFactory</span><span style="color:#ADBAC7;">(layoutInflater)</span></span>
<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><p>然后使用以下方式将其设置到你需要装载的 Hikage 布局上。</p><blockquote><p>示例如下</p></blockquote><div class="language-kotlin line-numbers-mode" data-ext="kt"><pre class="shiki github-dark-dimmed" style="background-color:#22272e;" tabindex="0"><code><span class="line"><span style="color:#768390;">// 假设这就是你的 Context</span></span>
<span class="line"><span style="color:#F47067;">val</span><span style="color:#ADBAC7;"> context: </span><span style="color:#F69D50;">Context</span></span>
<span class="line"><span style="color:#768390;">// 创建 Hikage 对象</span></span>
<span class="line"><span style="color:#F47067;">val</span><span style="color:#ADBAC7;"> hikage </span><span style="color:#F47067;">=</span><span style="color:#ADBAC7;"> </span><span style="color:#DCBDFB;">Hikageable</span><span style="color:#ADBAC7;">(</span></span>
<span class="line"><span style="color:#ADBAC7;">    context </span><span style="color:#F47067;">=</span><span style="color:#ADBAC7;"> context,</span></span>
<span class="line"><span style="color:#ADBAC7;">    factory </span><span style="color:#F47067;">=</span><span style="color:#ADBAC7;"> {</span></span>
<span class="line"><span style="color:#ADBAC7;">        </span><span style="color:#768390;">// 添加自定义的 HikageFactory 对象</span></span>
<span class="line"><span style="color:#ADBAC7;">        </span><span style="color:#DCBDFB;">add</span><span style="color:#ADBAC7;">(factory)</span></span>
<span class="line"><span style="color:#ADBAC7;">        </span><span style="color:#768390;">// 直接添加</span></span>
<span class="line"><span style="color:#ADBAC7;">        </span><span style="color:#DCBDFB;">add</span><span style="color:#ADBAC7;"> { parent, base, context, params </span><span style="color:#F47067;">-&gt;</span></span>
<span class="line"><span style="color:#ADBAC7;">            </span><span style="color:#768390;">// ...</span></span>
<span class="line"><span style="color:#ADBAC7;">            </span><span style="color:#6CB6FF;">null</span></span>
<span class="line"><span style="color:#ADBAC7;">        }</span></span>
<span class="line"><span style="color:#ADBAC7;">        </span><span style="color:#768390;">// 连续添加多个</span></span>
<span class="line"><span style="color:#ADBAC7;">        </span><span style="color:#DCBDFB;">addAll</span><span style="color:#ADBAC7;">(factories)</span></span>
<span class="line"><span style="color:#ADBAC7;">    }</span></span>
<span class="line"><span style="color:#ADBAC7;">) {</span></span>
<span class="line"><span style="color:#ADBAC7;">    </span><span style="color:#DCBDFB;">LinearLayout</span><span style="color:#ADBAC7;"> {</span></span>
<span class="line"><span style="color:#ADBAC7;">        </span><span style="color:#DCBDFB;">TextView</span><span style="color:#ADBAC7;"> {</span></span>
<span class="line"><span style="color:#ADBAC7;">            text </span><span style="color:#F47067;">=</span><span style="color:#ADBAC7;"> </span><span style="color:#96D0FF;">&quot;Hello, World!&quot;</span></span>
<span class="line"><span style="color:#ADBAC7;">        }</span></span>
<span class="line"><span style="color:#ADBAC7;">    }</span></span>
<span class="line"><span style="color:#ADBAC7;">}</span></span>
<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><div class="custom-container tip"><p class="custom-container-title">小提示</p><p>Hikage 在默认装载时将会根据传入 <code>Context</code> 对象的 <code>LayoutInflater.Factory2</code> 对布局进行装载，如果你正在使用 <code>AppCompatActivity</code>， 布局中的组件将会自动被替换为对应的 Compat 组件或 Material 组件，与 XML 布局的特性保持一致。</p><p>如果你不需要默认生效此特性，可以使用以下方式全局关闭。</p><blockquote><p>示例如下</p></blockquote><div class="language-kotlin line-numbers-mode" data-ext="kt"><pre class="shiki github-dark-dimmed" style="background-color:#22272e;" tabindex="0"><code><span class="line"><span style="color:#ADBAC7;">Hikage.isAutoProcessWithFactory2 </span><span style="color:#F47067;">=</span><span style="color:#ADBAC7;"> </span><span style="color:#6CB6FF;">false</span></span>
<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div></div></div></div><h3 id="预览布局" tabindex="-1"><a class="header-anchor" href="#预览布局" aria-hidden="true">#</a> 预览布局</h3><p>Hikage 支持在 Android Studio 中预览布局，借助于 Android Studio 自带的自定义 <code>View</code> 预览插件，你可以使用以下方式预览布局。</p><p>你只需要定义一个预览布局的自定义 <code>View</code> 并继承于 <code>HikagePreview</code>。</p><blockquote><p>示例如下</p></blockquote><div class="language-kotlin line-numbers-mode" data-ext="kt"><pre class="shiki github-dark-dimmed" style="background-color:#22272e;" tabindex="0"><code><span class="line"><span style="color:#F47067;">class</span><span style="color:#ADBAC7;"> </span><span style="color:#F69D50;">MyLayoutPreview</span><span style="color:#ADBAC7;">(context: </span><span style="color:#F69D50;">Context</span><span style="color:#ADBAC7;">, attrs: </span><span style="color:#F69D50;">AttributeSet</span><span style="color:#ADBAC7;">?) : </span><span style="color:#F69D50;">HikagePreview</span><span style="color:#ADBAC7;">(</span><span style="color:#F69D50;">context</span><span style="color:#ADBAC7;">, </span><span style="color:#F69D50;">attrs</span><span style="color:#ADBAC7;">) {</span></span>
<span class="line"></span>
<span class="line"><span style="color:#ADBAC7;">    </span><span style="color:#F47067;">override</span><span style="color:#ADBAC7;"> </span><span style="color:#F47067;">fun</span><span style="color:#ADBAC7;"> </span><span style="color:#DCBDFB;">build</span><span style="color:#ADBAC7;">() </span><span style="color:#F47067;">=</span><span style="color:#ADBAC7;"> </span><span style="color:#DCBDFB;">Hikageable</span><span style="color:#ADBAC7;"> {</span></span>
<span class="line"><span style="color:#ADBAC7;">        </span><span style="color:#DCBDFB;">LinearLayout</span><span style="color:#ADBAC7;"> {</span></span>
<span class="line"><span style="color:#ADBAC7;">            </span><span style="color:#DCBDFB;">TextView</span><span style="color:#ADBAC7;"> {</span></span>
<span class="line"><span style="color:#ADBAC7;">                text </span><span style="color:#F47067;">=</span><span style="color:#ADBAC7;"> </span><span style="color:#96D0FF;">&quot;Hello, World!&quot;</span></span>
<span class="line"><span style="color:#ADBAC7;">            }</span></span>
<span class="line"><span style="color:#ADBAC7;">        }</span></span>
<span class="line"><span style="color:#ADBAC7;">    }</span></span>
<span class="line"><span style="color:#ADBAC7;">}</span></span>
<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><p>然后在你当前的窗口右侧应该会出现预览窗格，打开后点击 “Build &amp; Refresh”，等待编译完成后将会自动显示预览。</p><div class="custom-container tip"><p class="custom-container-title">小提示</p><p><code>HikagePreview</code> 实现了 <code>HikageBuilder</code> 接口，你可以在 <code>build</code> 方法中返回任意的 Hikage 布局以进行预览。</p></div><div class="custom-container danger"><p class="custom-container-title">特别注意</p><p><code>HikagePreview</code> 仅支持在 Android Studio 中预览布局，请勿在运行时使用它或将其添加到任何 XML 布局中。</p></div>`,33);function B(C,m){const c=p("ExternalLinkIcon"),e=p("RouterLink");return t(),r("div",null,[y,a("p",null,[s("你可以 "),a("a",A,[s("点击这里"),n(c)]),s(" 查看 KDoc。")]),v,a("p",null,[s("Hikage 为 Android 基础的布局组件提供了组件类名对应的函数，你可以直接使用这些函数创建组件，而无需再使用泛型声明它们，如果你需要 Jetpack 或者 Material 提供的组件， 可以引入 "),n(e,{to:"/zh-cn/library/hikage-widget-androidx.html"},{default:o(()=>[s("hikage-widget-androidx")]),_:1}),s(" 或 "),n(e,{to:"/zh-cn/library/hikage-widget-material.html"},{default:o(()=>[s("hikage-widget-material")]),_:1}),s(" 模块。")]),u,a("p",null,[s("每次都手动实现这样复杂的函数看起来会很繁琐，如果你希望能够自动生成组件函数，可以引入并参考 "),n(e,{to:"/zh-cn/library/hikage-compiler.html"},{default:o(()=>[s("hikage-compiler")]),_:1}),s(" 模块。")]),D])}const F=i(d,[["render",B],["__file","hikage-core.html.vue"]]);export{F as default};
