在 Flutter 中，有没有办法让 Scrollbar 小部件的宽度小于传递给它的子部件？

Question

• 我希望我的水平可滚动小部件能够“离开屏幕”（消失在屏幕边缘）。
• 我还希望滚动条不要接触屏幕边缘。

我目前只能完成其中第一项任务。可滚动红色方块是滚动条的子项，如果添加填充，它将向可滚动红色方块和滚动条添加填充。

      Scrollbar(
      thumbVisibility: true,
      controller: scrollController,
      child: Container(
        margin: const EdgeInsets.only(bottom: 15),
        child: SingleChildScrollView(
          controller: scrollController,
          scrollDirection: Axis.horizontal,
          child: Row(
            children: [
              for (int i = 0; i < 25; i++)
                Container(
                  margin: const EdgeInsets.only(right: 20),
                  color: Colors.red,
                  height: 100,
                  width: 100,
                )
            ],
          ),
        ),
      ),
    )

Answer 1

为了使滚动不接触屏幕边缘，您必须将负责滚动的小部件包装在填充中，这个问题应该已经解决了，我将其保留为答案，因为我的声誉不允许我添加评论

Answer 2

不确定您的确切意思，但使用此问题页面和答案

更改了您的代码

此代码使用提升按钮从下到上导航（带动画）滚动条，抱歉现在无法添加 Gif :_)

import 'package:flutter/material.dart';

void main() {
  runApp(const MyApp());
}

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

  @override
  State<MyApp> createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> with TickerProviderStateMixin {

  late AnimationController controller;
  late Animation<Offset> offset;


  @override
  void initState() {
    super.initState();

    controller =
        AnimationController(vsync: this, duration: Duration(seconds: 1));

    offset = Tween<Offset>(begin: Offset.zero, end: Offset(0.0, 1.0))
        .animate(controller);
  }

  @override
  Widget build(BuildContext context) {
    var scrollController = ScrollController();
    return MaterialApp(
      home: Scaffold(
        body: Stack(
          children: <Widget>[
            Center(
              child: ElevatedButton(
                child: Text('Show / Hide'),
                onPressed: () {
                  switch (controller.status) {
                    case AnimationStatus.completed:
                      controller.reverse();
                      break;
                    case AnimationStatus.dismissed:
                      controller.forward();
                      break;
                    default:
                  }
                },
              ),
            ),
            Align(
              alignment: Alignment.bottomCenter,
              child: SlideTransition(
                position: offset,
                child: Scrollbar(
                  thumbVisibility: true,
                  controller: scrollController = ScrollController(),
                  child: Container(
                    margin: const EdgeInsets.only(bottom: 15),
                    child: SingleChildScrollView(
                      controller: scrollController,
                      scrollDirection: Axis.horizontal,
                      child: Row(
                        children: [
                          for (int i = 0; i < 25; i++)
                            SingleChildScrollView(
                              child: Container(
                                margin: const EdgeInsets.only(right: 20),
                                color: Colors.red,
                                height: 100,
                                width: 100,
                              ),
                            )
                        ],
                      ),
                    ),
                  ),
                ),
              ),
            )
          ],
        ),
      ),
    );
  }
}

Answer 3

使用

RawScrollbar

代替

Scrollbar

。

您将通过

RawScrollbar

获得更多自定义选项。

要为滚动条提供内边距，使其不接触屏幕边缘，您可以使用 mainAxisMargin

 的 

RawScrollbar。

RawScrollbar(
  mainAxisMargin: 10,
  child: ListView(),
),