<?xml version="1.0" encoding="utf-8" standalone="yes"?>
<rss version="2.0" xmlns:atom="http://www.w3.org/2005/Atom" xmlns:content="http://purl.org/rss/1.0/modules/content/">
  <channel>
    <title>Scrollable on 首页 | Widegram</title>
    <link>https://widegram.com/categories/scrollable/</link>
    <description>Recent content in Scrollable on 首页 | Widegram</description>
    <generator>Hugo -- gohugo.io</generator>
    <language>en</language>
    <lastBuildDate>Mon, 08 Nov 2021 20:53:00 +0000</lastBuildDate><atom:link href="https://widegram.com/categories/scrollable/index.xml" rel="self" type="application/rss+xml" />
    <item>
      <title>Flutter Scrollable教程</title>
      <link>https://widegram.com/2021/11/flutter-scrollable/</link>
      <pubDate>Mon, 08 Nov 2021 20:53:00 +0000</pubDate>
      
      <guid>https://widegram.com/2021/11/flutter-scrollable/</guid>
      <description>一、基本Scrollable 1.1 Recycle ​	类似RecyclerView，ListView会回收划出屏幕的控件，同时也会预先加载下面的几条。Flutter的回收可以使其被重复利用，也就是Recycle。缓冲区大小不是根据个数而是根据屏幕高度，大约是1/3屏幕，上下都有，可以用cacheExtent调整缓冲区高度。
1.2 分割线 ​	可以用奇偶数来做Divider()，但这不是一个很好的方法：index会偏移。可以使用ListView.seprated来做分割线。
1.3 滚动条跳转（固定高度） ​	指定Scrollbar()可以实现滚动条效果，但如果不添加itemCount属性，则列表无限长，即使滚动，滚动条也不会有反应；如果不指定itemExtent（这是一个主轴方向的紧约束），首先大幅跳转时会损失性能，其次滚动条可能会抖动。
1.4 Padding 在itemBuilder内加Padding，在视觉上会有padding，但在空白处可以滑动滚动； 在ListView.builder外加Padding，在视觉上有padding，空白处不可滑动； 设置ListView.builder内的padding属性，会在整个ListView上下留白，而不是元素间的空隙。可以用EdgeInsets.only(bottom: 200)来解决底部项目被FAB挡住的问题。 1.5 空白时显示其他控件 body: false ? Text(&amp;#34;加载中&amp;#34;) : ListView.builder 1.6 ScrollController 在ListView.builder中设置controller: _controller。例如，设置按下AppBar自动跳到顶部，可以使用以下代码：
AppBar( title: GestureDetector( onTap: () { //_controller.jumpTo(0.0); _controller.animatedTo(-20.0, duration: ,curve: ); //传入负值，出现到顶上再弹回的效果 }	//跳转 ) ) 有多个ListView时，也应设置对应的controller。
1.7 physics属性 ListView.builder的physics属性可以用来设置安卓或iOS风格的到顶回弹。例如physics: BouncingScrollPhysics()就是iOS风格的顶部回弹。
二、滑动事件 2.1 Scrollbar ​	使用iOS风格的Scrollbar可以使用CupertinoScrollbar()。同时设置isAlwaysShown和controller属性可以一直显示scrollbar。
2.2 RefreshIndicator下拉刷新 可以设置color和backgroundColor等属性设置下拉刷新指示器的样式。RefreshIndicator和Scrollbar可以互相嵌套，不要求顺序。
2.3 拦截滚动事件 使用NotificationListener，在onNotication返回true拦截事件。
2.4 Dismissible ​	在itemBuilder内返回一个Dismissible()，这里的key属性是必传的，例如UniqueKey()，设置onDismissed可以查看滑动方向并设置滑动后的操作，例如从列表中删除。
​	在Dismissible()中有background或secondaryBackground可以传入一个widget，分别对应左划右划的效果。
​	设置confirmDismiss为一个async函数，返回false表明滑动后不删除。</description>
      <content:encoded><![CDATA[<h2 id="一基本scrollable">一、基本Scrollable</h2>
<h4 id="11-recycle">1.1 Recycle</h4>
<p>​		类似RecyclerView，ListView会回收划出屏幕的控件，同时也会预先加载下面的几条。Flutter的回收可以使其被重复利用，也就是<code>Recycle</code>。缓冲区大小不是根据个数而是根据屏幕高度，大约是1/3屏幕，上下都有，可以用<code>cacheExtent</code>调整缓冲区高度。</p>
<h4 id="12-分割线">1.2 分割线</h4>
<p>​		可以用奇偶数来做<code>Divider()</code>，但这不是一个很好的方法：index会偏移。可以使用<code>ListView.seprated</code>来做分割线。</p>
<h4 id="13-滚动条跳转固定高度">1.3 滚动条跳转（固定高度）</h4>
<p>​		指定<code>Scrollbar()</code>可以实现滚动条效果，但如果不添加itemCount属性，则列表无限长，即使滚动，滚动条也不会有反应；如果不指定<code>itemExtent</code>（这是一个<strong>主轴方向</strong>的紧约束），首先大幅跳转时会损失性能，其次滚动条可能会抖动。</p>
<h4 id="14-padding">1.4 Padding</h4>
<ol>
<li>在<code>itemBuilder</code>内加<code>Padding</code>，在视觉上会有padding，但在空白处可以滑动滚动；</li>
<li>在<code>ListView.builder</code>外加<code>Padding</code>，在视觉上有padding，空白处不可滑动；</li>
<li>设置<code>ListView.builder</code>内的padding属性，会在整个<code>ListView</code>上下留白，而不是元素间的空隙。可以用<code>EdgeInsets.only(bottom: 200)</code>来解决底部项目被FAB挡住的问题。</li>
</ol>
<h4 id="15-空白时显示其他控件">1.5 空白时显示其他控件</h4>
<div class="highlight"><pre tabindex="0" style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4;"><code class="language-dart" data-lang="dart"><span style="display:flex;"><span>body: <span style="color:#66d9ef">false</span> <span style="color:#f92672">?</span> Text(<span style="color:#e6db74">&#34;加载中&#34;</span>) <span style="color:#f92672">:</span> ListView.builder
</span></span></code></pre></div><h4 id="16-scrollcontroller">1.6 ScrollController</h4>
<p>在<code>ListView.builder</code>中设置<code>controller: _controller</code>。例如，设置按下AppBar自动跳到顶部，可以使用以下代码：</p>
<div class="highlight"><pre tabindex="0" style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4;"><code class="language-dart" data-lang="dart"><span style="display:flex;"><span>AppBar(
</span></span><span style="display:flex;"><span>	title: GestureDetector(
</span></span><span style="display:flex;"><span>  	onTap: () {
</span></span><span style="display:flex;"><span>      <span style="color:#75715e">//_controller.jumpTo(0.0);
</span></span></span><span style="display:flex;"><span><span style="color:#75715e"></span>      _controller.animatedTo(<span style="color:#f92672">-</span><span style="color:#ae81ff">20.0</span>, duration: ,curve: );
</span></span><span style="display:flex;"><span>      <span style="color:#75715e">//传入负值，出现到顶上再弹回的效果
</span></span></span><span style="display:flex;"><span><span style="color:#75715e"></span>    }	<span style="color:#75715e">//跳转
</span></span></span><span style="display:flex;"><span><span style="color:#75715e"></span>  )
</span></span><span style="display:flex;"><span>)
</span></span></code></pre></div><p>有多个ListView时，也应设置对应的controller。</p>
<h4 id="17-physics属性">1.7 physics属性</h4>
<p>ListView.builder的physics属性可以用来设置安卓或iOS风格的到顶回弹。例如<code>physics: BouncingScrollPhysics()</code>就是iOS风格的顶部回弹。</p>
<h2 id="二滑动事件">二、滑动事件</h2>
<h4 id="21-scrollbar">2.1 Scrollbar</h4>
<p>​		使用iOS风格的<code>Scrollbar</code>可以使用<code>CupertinoScrollbar()</code>。同时设置<code>isAlwaysShown</code>和<code>controller</code>属性可以一直显示scrollbar。</p>
<h4 id="22-refreshindicator下拉刷新">2.2 RefreshIndicator下拉刷新</h4>
<p>可以设置<code>color</code>和<code>backgroundColor</code>等属性设置下拉刷新指示器的样式。<code>RefreshIndicator</code>和<code>Scrollbar</code>可以互相嵌套，不要求顺序。</p>
<h4 id="23-拦截滚动事件">2.3 拦截滚动事件</h4>
<p>使用<code>NotificationListener</code>，在<code>onNotication</code>返回<code>true</code>拦截事件。</p>
<h4 id="24-dismissible">2.4 Dismissible</h4>
<p>​		在itemBuilder内返回一个<code>Dismissible()</code>，这里的<code>key</code>属性是必传的，例如<code>UniqueKey()</code>，设置onDismissed可以查看滑动方向并设置滑动后的操作，例如从列表中删除。</p>
<p>​		在<code>Dismissible()</code>中有<code>background</code>或<code>secondaryBackground</code>可以传入一个<code>widget</code>，分别对应左划右划的效果。</p>
<p>​		设置<code>confirmDismiss</code>为一个<code>async</code>函数，返回<code>false</code>表明滑动后不删除。</p>
<p>​		设置<code>onResize</code>属性可以在该项消失、屏幕开始变化时不停地调用；<code>movementDuration</code>可以设置滑动的时常，movement后就onResize；<code>dismissThreshold</code>设置滑动多少后消除；<code>direction</code>可以设置滑动方向。</p>
<h2 id="三其他控件">三、其他控件</h2>
<h4 id="31-3d转轮滚动效果listwheelscrollview">3.1 3D转轮滚动效果——ListWheelScrollView</h4>
<ol>
<li>offAxisFraction：偏移数值</li>
<li>diameterRatio：直径比例</li>
<li>overAndUnderCenterOpacity：设置上下不透明度</li>
<li>magnification：放大倍数</li>
<li>physics：滚动物理效果</li>
<li>onSelectedItemChanged：选择的内容变化</li>
<li>使用<code>RotatedBox</code>来进行横向滚动</li>
</ol>
<h4 id="32-滚动页面pageview">3.2 滚动页面——PageView</h4>
<ol>
<li>pageSnapping：划到中间可以停住</li>
<li>scrollDirection：设置滚动方向</li>
<li>onPageChanged</li>
</ol>
<h4 id="33-reorderablelistview">3.3 ReorderableListView</h4>
<ol>
<li>
<p>children：List.generate(&hellip;)</p>
</li>
<li>
<p>onReorder: (int oldIndex,int newIndex)：移动后的新位置和旧位置</p>
<ol>
<li>
<p>这里有一个小坑，应该这样写：</p>
<div class="highlight"><pre tabindex="0" style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4;"><code class="language-dart" data-lang="dart"><span style="display:flex;"><span>onReorder: (<span style="color:#66d9ef">int</span> oldIndex,<span style="color:#66d9ef">int</span> newIndex){
</span></span><span style="display:flex;"><span>  <span style="color:#66d9ef">if</span>(newIndex <span style="color:#f92672">&gt;</span> oldIndex) newIndex<span style="color:#f92672">--</span>;
</span></span><span style="display:flex;"><span>  <span style="color:#75715e">//...继续写其他的业务逻辑
</span></span></span><span style="display:flex;"><span><span style="color:#75715e"></span>}
</span></span></code></pre></div></li>
</ol>
</li>
<li>
<p>在每个ListItem中必须设置单独的key，否则会报错，因为它的排序属性。</p>
<div class="highlight"><pre tabindex="0" style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4;"><code class="language-dart" data-lang="dart"><span style="display:flex;"><span>ReorderableListView(
</span></span><span style="display:flex;"><span>	children: List.generate(
</span></span><span style="display:flex;"><span>  	<span style="color:#ae81ff">20</span>,
</span></span><span style="display:flex;"><span>    (index) <span style="color:#f92672">=&gt;</span> Text(<span style="color:#e6db74">&#34;</span><span style="color:#e6db74">$</span>index<span style="color:#e6db74">&#34;</span>,key: UniqueKey()),
</span></span><span style="display:flex;"><span>
</span></span><span style="display:flex;"><span>  )
</span></span><span style="display:flex;"><span>)
</span></span></code></pre></div></li>
</ol>
<h4 id="34-singlechildscrollview">3.4 SingleChildScrollView</h4>
<p>这个组件一般不推荐用，除非是一般不需要滑动的组件，在屏幕不够大、显示不下的情况下偶尔滑动。</p>
]]></content:encoded>
    </item>
    
  </channel>
</rss>
