一统天下 flutter - widget 滚动类: SingleChildScrollView, Scrollbar - 可滚动组件,滚动条

源码 https://github.com/webabcd/flutter_demo
作者 webabcd

一统天下 flutter - widget 滚动类: SingleChildScrollView, Scrollbar - 可滚动组件,滚动条

示例如下:

lib\widget\scroll\single_child_scroll_view.dart

/*
 * SingleChildScrollView - 可滚动组件(让一个子可以滚动)
 * Scrollbar - 滚动条
 *
 * 一般在一个 Scrollbar 下放一个 SingleChildScrollView,默认的 ScrollController 会控制他们之间的联动
 * 如果不需要显示滚动条的话,那么就只使用 SingleChildScrollView 就行了
 */

import 'package:flutter/gestures.dart';
import 'package:flutter/material.dart';

import '../../helper.dart';

class SingleChildScrollViewDemo extends StatefulWidget {
  const SingleChildScrollViewDemo({Key? key}) : super(key: key);

  @override
  _SingleChildScrollViewDemoState createState() => _SingleChildScrollViewDemoState();
}

class _SingleChildScrollViewDemoState extends State<SingleChildScrollViewDemo> {

  final String _string = "012345678901234567890123456789012345678901234567890123456789";

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text("title")),
      backgroundColor: Colors.orange,
      /// Scrollbar - 滚动条,可以与其内的可滚动组件联动
      body: Scrollbar(
        /// 滚动条的宽度
        thickness: 10,
        /// 滚动条两端的圆角半径
        radius: const Radius.circular(10),
        /// 是否显示滚动条滑块
        thumbVisibility: false,
        /// 是否显示滚动条轨道
        trackVisibility: false,
        /// SingleChildScrollView - 支持一个子的可滚动组件
        child: SingleChildScrollView(
          /// 滚动方向(vertical 或 horizontal)
          /// 如果需要两个方向都滚,那么就需要用两个 SingleChildScrollView
          scrollDirection: Axis.vertical,
          /// 内边距
          padding: EdgeInsets.zero,
          /// 用于确定什么时候触发拖动事件(我这里测试时看不出二者的区别)
          ///   start - 出现拖拽手势的时候触发拖动事件
          ///   down - 手指按下的时候触发拖动事件
          dragStartBehavior: DragStartBehavior.start,
          /// 滚动的响应方式
          ///   NeverScrollableScrollPhysics() - 禁止滚动
          ///   BouncingScrollPhysics() - 允许滚动,滚到边缘后会有类似 ios 的弹簧效果
          ///   ClampingScrollPhysics() - 允许滚动,滚到边缘后会有类似 android 的光波效果
          ///   AlwaysScrollableScrollPhysics() - 允许滚动,滚到边缘后在 ios 中会有弹簧效果,在 android 中会有光波效果
          ///   RangeMaintainingScrollPhysics() - 有 AlwaysScrollableScrollPhysics() 的效果,并且在滚动中即使内容出现了增多或减少也不会影响滚动
          physics: const RangeMaintainingScrollPhysics(),
          /// 需要滚动的子
          child: Center(
            child: Column(
              children:_string.split("").map((c) => MyText(c)).toList(),
            ),
          ),
        ),
      ),
    );
  }
}

源码 https://github.com/webabcd/flutter_demo
作者 webabcd

posted @ 2023-03-23 15:55  webabcd  阅读(1002)  评论(0编辑  收藏  举报