我正在尝试添加垂直和水平滚动条。我用的是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上可见。
1条答案
按热度按时间uidvcgyl1#
你去查查这个
Link to the output