zoukankan      html  css  js  c++  java
  • 【Flutter】可滚动组件之SingleChildScrollView

    前言

    SingleChildScrollView类似于Android中的ScrollView,它只能接收一个子组件。

    接口描述

    const SingleChildScrollView({
        Key key,
        this.scrollDirection = Axis.vertical,
        // 是否按照阅读方向相反的方向滑动,如:scrollDirection值为Axis.horizontal,如果阅读方向是从左到右(取决于语言环境,阿拉伯语就是从右到左)。
        // reverse为true时,那么滑动方向就是从右往左。其实此属性本质上是决定可滚动组件的初始滚动位置是在“头”还是“尾”,取false时,初始滚动位置在“头”,反之则在“尾”。
        this.reverse = false,
        this.padding,
        // 指是否使用widget树中默认的PrimaryScrollController;当滑动方向为垂直方向(scrollDirection值为Axis.vertical)并且没有指定controller时,primary默认为true.
        bool primary,
        this.physics,
        this.controller,
        this.child,
        this.dragStartBehavior = DragStartBehavior.start,
      }) : assert(scrollDirection != null),
           assert(dragStartBehavior != null),
           assert(!(controller != null && primary == true),
              'Primary ScrollViews obtain their ScrollController via inheritance from a PrimaryScrollController widget. '
              'You cannot both set primary to true and pass an explicit controller.'
           ),
           primary = primary ?? controller == null && identical(scrollDirection, Axis.vertical),
           super(key: key);
    
    

    代码示例

    // SingleChildScrollView
    
    // 它类似于Android中的ScrollView,它只能接受一个子组件
    
    // 将大写字母A-Z0123456789沿垂直方向显示
    import 'package:flutter/material.dart';
    
    class SingleChildScrollViewTest extends StatelessWidget {
      @override
      Widget build(BuildContext context) {
        String str = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789';
        // 显示进度条
        return Scaffold(
            appBar: AppBar(
              title: Text('SingleChildScrollView'),
            ),
            body: Scrollbar(
              child: SingleChildScrollView(
                padding: EdgeInsets.all(16.0),
                child: Center(
                  child: Column(
                    // 动态创建一个List<Widget>
                    children: str.split('')
                    // 每一个字母都用一个Text显示,字体为原来的2倍
                        .map((c) => Text(c, textScaleFactor: 2.0,))
                        .toList(),
                  ),
                ),
              ),
            )
        );
    
      }
    }
    
    

    总结

    需要注意的是,通常SingleChildScrollView只应在期望的内容不会超过屏幕太多时使用,这是因为SingleChildScrollView不支持基于Sliver的延迟实例化模型,所以如果预计视口可能包含超出屏幕尺寸太多的内容时,那么使用SingleChildScrollView将会非常昂贵(性能差),此时应该使用一些支持Sliver延迟加载的可滚动组件,如ListView。

  • 相关阅读:
    宿主机( win 7 系统) ping 虚拟机VMware( cent os 6.6 ) 出现“请求超时”或者“无法访问目标主机”的解决方法
    Java实现 LeetCode 23 合并K个排序链表
    Java实现 LeetCode 23 合并K个排序链表
    Java实现 LeetCode 23 合并K个排序链表
    Java实现 LeetCode 22 括号生成
    Java实现 LeetCode 22 括号生成
    Java实现 LeetCode 22 括号生成
    Java实现 LeetCode 21 合并两个有序链表
    Java实现 LeetCode 21 合并两个有序链表
    Java实现 LeetCode 21 合并两个有序链表
  • 原文地址:https://www.cnblogs.com/parzulpan/p/12145820.html
Copyright © 2011-2022 走看看