Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Update custom_paint.html #155

Open
wants to merge 1 commit into
base: main
Choose a base branch
from
+1 −1
Open

Update custom_paint.html #155

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion docs/chapter10/custom_paint.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -33,7 +33,7 @@
<span class="token keyword">this</span><span class="token punctuation">.</span>willChange <span class="token operator">=</span> <span class="token boolean">false</span><span class="token punctuation">,</span>
<span class="token class-name">Widget</span> child<span class="token punctuation">,</span> <span class="token comment">//子节点，可以为空</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br></div></div><ul><li><code>painter</code>: 背景画笔，会显示在子节点后面;</li> <li><code>foregroundPainter</code>: 前景画笔，会显示在子节点前面</li> <li><code>size</code>：当child为null时，代表默认绘制区域大小，如果有child则忽略此参数，画布尺寸则为child尺寸。如果有child但是想指定画布为特定大小，可以使用SizeBox包裹CustomPaint实现。</li> <li><code>isComplex</code>：是否复杂的绘制，如果是，Flutter会应用一些缓存策略来减少重复渲染的开销。</li> <li><code>willChange</code>：和<code>isComplex</code>配合使用，当启用缓存时，该属性代表在下一帧中绘制是否会改变。</li></ul> <p>可以看到，绘制时我们需要提供前景或背景画笔，两者也可以同时提供。我们的画笔需要继承<code>CustomPainter</code>类，我们在画笔类中实现真正的绘制逻辑。</p> <h3 id="_1-绘制边界-repaintboundary"><a href="#_1-绘制边界-repaintboundary" class="header-anchor">#</a> 1. 绘制边界 RepaintBoundary</h3> <p>如果<code>CustomPaint</code>有子节点，为了避免子节点不必要的重绘并提高性能，通常情况下都会将子节点包裹在<code>RepaintBoundary</code>组件中，这样会在绘制时就会创建一个新的绘制层（Layer），其子组件将在新的Layer上绘制，而父组件将在原来Layer上绘制，也就是说<code>RepaintBoundary</code> 子组件的绘制将独立于父组件的绘制，<code>RepaintBoundary</code>会隔离其子节点和<code>CustomPaint</code>本身的绘制边界。示例如下：</p> <div class="language-dart line-numbers-mode"><pre class="language-dart"><code><span class="token class-name">CustomPaint</span><span class="token punctuation">(</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br></div></div><ul><li><code>painter</code>: 背景画笔，会显示在子节点后面;</li> <li><code>foregroundPainter</code>: 前景画笔，会显示在子节点前面</li> <li><code>size</code>：当child为null时，代表默认绘制区域大小，如果有child则忽略此参数，画布尺寸则为child尺寸。如果有child但是想指定画布为特定大小，可以使用SizedBox包裹CustomPaint实现。</li> <li><code>isComplex</code>：是否复杂的绘制，如果是，Flutter会应用一些缓存策略来减少重复渲染的开销。</li> <li><code>willChange</code>：和<code>isComplex</code>配合使用，当启用缓存时，该属性代表在下一帧中绘制是否会改变。</li></ul> <p>可以看到，绘制时我们需要提供前景或背景画笔，两者也可以同时提供。我们的画笔需要继承<code>CustomPainter</code>类，我们在画笔类中实现真正的绘制逻辑。</p> <h3 id="_1-绘制边界-repaintboundary"><a href="#_1-绘制边界-repaintboundary" class="header-anchor">#</a> 1. 绘制边界 RepaintBoundary</h3> <p>如果<code>CustomPaint</code>有子节点，为了避免子节点不必要的重绘并提高性能，通常情况下都会将子节点包裹在<code>RepaintBoundary</code>组件中，这样会在绘制时就会创建一个新的绘制层（Layer），其子组件将在新的Layer上绘制，而父组件将在原来Layer上绘制，也就是说<code>RepaintBoundary</code> 子组件的绘制将独立于父组件的绘制，<code>RepaintBoundary</code>会隔离其子节点和<code>CustomPaint</code>本身的绘制边界。示例如下：</p> <div class="language-dart line-numbers-mode"><pre class="language-dart"><code><span class="token class-name">CustomPaint</span><span class="token punctuation">(</span>
size<span class="token punctuation">:</span> <span class="token class-name">Size</span><span class="token punctuation">(</span><span class="token number">300</span><span class="token punctuation">,</span> <span class="token number">300</span><span class="token punctuation">)</span><span class="token punctuation">,</span> <span class="token comment">//指定画布大小</span>
painter<span class="token punctuation">:</span> <span class="token class-name">MyPainter</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">,</span>
child<span class="token punctuation">:</span> <span class="token class-name">RepaintBoundary</span><span class="token punctuation">(</span>child<span class="token punctuation">:</span><span class="token punctuation">.</span><span class="token punctuation">.</span><span class="token punctuation">.</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">,</span>
Expand Down