在 window 底部放置水平滚动条

Question

我目前正在开发一个 Flutter 应用程序，我将屏幕分为两个区域。左侧区域约占屏幕宽度的 1/3，而右侧区域占屏幕宽度的另外 2/3。这是一个描述：

在“A”部分，我有一个基于 DataTable 的自定义“树视图”小部件。它允许用户 expand/collapse 部分树。树视图也可以在水平和垂直方向上滚动，以防它占用的屏幕空间超过区域 A 中的可用空间。

目前，如果树视图没有占用区域A的整个高度，那么树视图底部的水平滚动条只会出现在树视图的底部，如下图所示:

然而，这不是我想要放置水平滚动条的地方。我希望它位于 window 的底部，无论树视图小部件的大小如何，如下图所示：

我的widget树的代码如下：

    @override
    Widget build(BuildContext context) 
    {
        return Scaffold(
            appBar: AppBar(title: Text(widget.title, style: const TextStyle(color: Colors.white))),
            body: 
                Row(
                    children: [
                        Expanded(flex: 1, 
                            child: Align(
                                alignment: Alignment.topLeft,
                                child: Container(
                                    height: double.infinity,
                                    color: Colors.white,
                                    child: Scrollbar(
                                        scrollbarOrientation: ScrollbarOrientation.right,
                                        isAlwaysShown: false,
                                        child: SingleChildScrollView(
                                            scrollDirection: Axis.vertical,
                                            child: Scrollbar(
                                                isAlwaysShown: false,
                                                scrollbarOrientation: ScrollbarOrientation.bottom,
                                                child: SingleChildScrollView(
                                                    scrollDirection: Axis.horizontal,
                                                    child: TreeViewWidget(
                                                        model: model, 
                                                        dataheader_color: const Color.fromARGB(255, 230, 230, 230),
                                                        tree_expander_style: TreeExpanderStyle.PlusMinusOutlined,
                                                        show_header_row: true
                                                    ),
                                                )
                                            )
                                        )
                                    )
                                )
                            )
                        ),
                        Expanded(flex: 2, 
                            child: Column(
                                children: const [

                                ],
                            )
                        )
                    ]
                )
        );
    }

如何让水平滚动条正确地放置在 window 的底部，而不是紧挨着树视图小部件的下方？

感谢您的帮助！

Answer 1

如果您想同时支持水平和垂直滚动条，使用库可能是最简单的方法，例如 cross_scroll or adaptive_scrollbar，仅举几例。我建议您查看这些软件包或查找其他软件包，而不是自己编写。

如果你真的想自己做，你可以尝试将 Scrollbar 抬到你的 Container 之外，但一定要使用 ScrollController 连接他们。例如（根据您问题中的代码修改）：

import 'package:flutter/material.dart';

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

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: const MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  const MyHomePage({Key? key, required this.title}) : super(key: key);

  final String title;

  @override
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  final _controller = ScrollController();

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('demo')),
      body: Padding(
        padding: const EdgeInsets.all(20.0),
        child: Row(
          children: [
            Expanded(
              flex: 2,
              child: Scrollbar( // <-- move the scroll bar here
                controller: _controller, // <-- controller
                isAlwaysShown: true,
                scrollbarOrientation: ScrollbarOrientation.bottom,
                child: Container(
                  height: double.infinity,
                  color: Colors.yellow,
                  child: SingleChildScrollView(
                    controller: _controller, // <-- controller
                    scrollDirection: Axis.horizontal,
                    child: Scrollbar(
                      isAlwaysShown: true,
                      scrollbarOrientation: ScrollbarOrientation.right,
                      child: SingleChildScrollView(
                        scrollDirection: Axis.vertical,
                        child: Container(
                          color: Colors.blue,
                          width: 1000,
                          height: 300,
                        ),
                      ),
                    ),
                  ),
                ),
              ),
            ),
            Expanded(
              flex: 1,
              child: Container(
                color: Colors.red,
                child: FlutterLogo(),
              ),
            ),
          ],
        ),
      ),
    );
  }
}

在 window 底部放置水平滚动条

position horizontal scrollbar at bottom of window

scrollbar

scrollview

dart

flutter

flutter-layout