Flutter 中的滚动条位置不正确

5hcedyr0  于 2023-06-07  发布在  Flutter
关注(0)|答案(1)|浏览(285)

我正在尝试添加垂直和水平滚动条。我用的是Adaptive Scrollbar包。

return LayoutBuilder(
  builder: (context, constraints) {
    return Padding(
      padding: const EdgeInsets.all(10.0),
      child: Container(
        color: Colors.yellow,
        width: constraints.maxWidth - 20,
        height: constraints.maxHeight - 20,
        child: AdaptiveScrollbar(
          width: 20,
          controller: _verticalScrollController,
          position: ScrollbarPosition.right,
          child: SingleChildScrollView(
            controller: _verticalScrollController,
            scrollDirection: Axis.vertical,
            child: AdaptiveScrollbar(
              controller: _horizontalScrollController,
              position: ScrollbarPosition.bottom,
              child: SingleChildScrollView(
                controller: _horizontalScrollController,
                scrollDirection: Axis.horizontal,
                child: Column(
                  children: [
                    Row(
                      children: [
                        Container(
                          color: Colors.red,
                          width: 200,
                          child: Text("Test"),
                        ),
                        Container(
                          color: Colors.pink,
                          width: 200,
                          child: Text("Test"),
                        ),
                        Container(
                          color: Colors.orange,
                          width: 200,
                          child: Text("Test"),
                        ),
                        Container(
                          color: Colors.purple,
                          width: 200,
                          child: Text("Test"),
                        ),
                        Container(
                          color: Colors.black,
                          width: 200,
                          child: Text("Test"),
                        ),
                        Container(
                          color: Colors.blue,
                          width: 200,
                          child: Text("Test"),
                        ),
                        Container(
                          color: Colors.green,
                          width: 200,
                          child: Text("Test"),
                        ),
                      ],
                    ),
                    for (int a = 0; a < 100; a++)
                      Row(
                        children: [
                          Container(
                            color: Colors.red,
                            width: 200,
                            child: Text("Test"),
                          ),
                          Container(
                            color: Colors.pink,
                            width: 200,
                            child: Text("Test"),
                          ),
                          Container(
                            color: Colors.orange,
                            width: 200,
                            child: Text("Test"),
                          ),
                          Container(
                            color: Colors.purple,
                            width: 200,
                            child: Text("Test"),
                          ),
                          Container(
                            color: Colors.black,
                            width: 200,
                            child: Text("Test"),
                          ),
                          Container(
                            color: Colors.blue,
                            width: 200,
                            child: Text("Test"),
                          ),
                          Container(
                            color: Colors.green,
                            width: 200,
                            child: Text("Test"),
                          ),
                        ],
                      ),
                  ],
                ),
              ),
            ),
          ),
        ),
      ),
    );
  },
);

我希望滚动条在右边和底部,我也在代码中指定了位置,但它仍然显示在右边和顶部。
电流输出如下图所示

我使用自适应滚动条只是为了使滚动条在Web上可见。

uidvcgyl

uidvcgyl1#

你去查查这个
Link to the output

LayoutBuilder(
  builder: (context, constraints) {
    return Padding(
      padding: const EdgeInsets.all(10.0),
      child: Container(
        color: Colors.yellow,
        width: constraints.maxWidth - 20,
        height: constraints.maxHeight - 20,
        child: AdaptiveScrollbar(
          width: 20,
          controller: _verticalScroll,
          position: ScrollbarPosition.right,
          child: AdaptiveScrollbar(
            controller: _horizontalScroll,
            position: ScrollbarPosition.bottom,
            child: SingleChildScrollView(
              controller: _horizontalScroll,
              scrollDirection: Axis.horizontal,
              child: SingleChildScrollView(
                controller: _verticalScroll,
                child: Column(
                  children: [
                    Row(
                      children: [
                        Container(
                          color: Colors.red,
                          width: 200,
                          child: Text("Test"),
                        ),
                        Container(
                          color: Colors.pink,
                          width: 200,
                          child: Text("Test"),
                        ),
                        Container(
                          color: Colors.orange,
                          width: 200,
                          child: Text("Test"),
                        ),
                        Container(
                          color: Colors.purple,
                          width: 200,
                          child: Text("Test"),
                        ),
                        Container(
                          color: Colors.black,
                          width: 200,
                          child: Text("Test"),
                        ),
                        Container(
                          color: Colors.blue,
                          width: 200,
                          child: Text("Test"),
                        ),
                        Container(
                          color: Colors.green,
                          width: 200,
                          child: Text("Test"),
                        ),
                      ],
                    ),
                    for (int a = 0; a < 100; a++)
                      Row(
                        children: [
                          Container(
                            color: Colors.red,
                            width: 200,
                            child: Text("Test"),
                          ),
                          Container(
                            color: Colors.pink,
                            width: 200,
                            child: Text("Test"),
                          ),
                          Container(
                            color: Colors.orange,
                            width: 200,
                            child: Text("Test"),
                          ),
                          Container(
                            color: Colors.purple,
                            width: 200,
                            child: Text("Test"),
                          ),
                          Container(
                            color: Colors.black,
                            width: 200,
                            child: Text("Test"),
                          ),
                          Container(
                            color: Colors.blue,
                            width: 200,
                            child: Text("Test"),
                          ),
                          Container(
                            color: Colors.green,
                            width: 200,
                            child: Text("Test"),
                          ),
                        ],
                      ),
                  ],
                ),
              ),
            ),
          )
        ),
      ),
    );
  },
)

相关问题