BetterAndroid/Hikage
5
0
Fork 0
mirror of https://github.com/BetterAndroid/Hikage.git synced 2025-09-07 19:14:22 +08:00
Code Issues Actions Packages Projects Releases Wiki Activity
Files
gh-pages
Hikage/assets/hikage-core.html--xfNkeP6.js
github-actions[bot] 0b533c67b1 Deploy to GitHub pages
2025-08-23 18:52:31 +00:00

282 lines
77 KiB
JavaScript
Raw Permalink Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

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-ZnF1aHNS.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="sweetdependency-推荐" tabindex="-1"><a class="header-anchor" href="#sweetdependency-推荐" aria-hidden="true">#</a> SweetDependency (推荐)</h3><p>在你的项目 <code>SweetDependency</code> 配置文件中添加依赖。</p><div class="language-yaml line-numbers-mode" data-ext="yml"><pre class="shiki github-dark-dimmed" style="background-color:#22272e;" tabindex="0"><code><span class="line"><span style="color:#8DDB8C;">libraries</span><span style="color:#ADBAC7;">:</span></span>
<span class="line"><span style="color:#ADBAC7;"> </span><span style="color:#8DDB8C;">com.highcapable.hikage</span><span style="color:#ADBAC7;">:</span></span>
<span class="line"><span style="color:#ADBAC7;"> </span><span style="color:#8DDB8C;">hikage-core</span><span style="color:#ADBAC7;">:</span></span>
<span class="line"><span style="color:#ADBAC7;"> </span><span style="color:#8DDB8C;">version</span><span style="color:#ADBAC7;">: </span><span style="color:#96D0FF;">+</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>在你的项目 <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;">(com.highcapable.hikage.hikage.core)</span></span>
<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div></div></div><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>`,21),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};
Reference in New Issue View Git Blame Copy Permalink