具有将SingleChildScrollView放入支架的功能,该支架在SingleChildScrollView上具有另一个不需要滚动的小部件。 例如,我有一个SingleChildScrollView,我需要在指定位置添加一个固定按钮,但是此按钮不会滚动。
我尝试使用Stack小部件,但是如果在SingleChildScrollView之前添加按钮小部件,则无法单击,否则,如果我在SingleChildScrollView之后添加按钮,则滚动触摸不起作用。
有人有问题吗?
答案 0 :(得分:1)
现在我们了解了您想要实现的目标,可以使用Stack小部件,ListView并使用Align小部件来放置包含要用作标题的小部件的Container:
Stack(
children: <Widget>[
ListView.builder(
itemCount: 20,
itemBuilder: (context, index) {
return Container(
child: Text('item $index'),
height: 40,
color: Colors.blueGrey,
margin: EdgeInsets.all(14),
);
}
),
Align(
alignment: Alignment.topCenter,
child: Container(
margin: EdgeInsets.only(top: 20),
alignment: Alignment.center,
height: 30,
width: 300,
color: Colors.blue,
child: Text('This is a title')
),
),
],
)
在最终了解用户的需求之前的先前答案。
如果我正确理解了您的问题,并且希望在视图中的顶部具有固定的Widget,并在其下方具有可滚动项的列表,那么带有SliverAppBar和SliverList的CustomScrollView将是您的解决方案。请参见下面的示例:
CustomScrollView(
slivers: <Widget>[
SliverAppBar(
pinned: true,
title: Center(child: Text('Title')),
),
SliverList(
delegate: SliverChildBuilderDelegate(
(BuildContext context, int index) {
return Container(
height: 40,
margin: EdgeInsets.all(10),
alignment: Alignment.center,
color: Colors.teal[100 * (index % 9)],
child: Text('grid item $index'),
);
},
childCount: 20
),
),
],
)
如果您希望固定的Widget位于视图的底部,则可以使用Scaffold`的bottomNavigationBar
属性:
Scaffold(
...
bottomNavigationBar: Container(
alignment: Alignment.center,
height: 50,
child: Text('title')
),
)
答案 1 :(得分:0)