Flutter-SingleChildScrollView固定小部件

时间:2020-01-16 14:55:21

标签: flutter singlechildscrollview

具有将SingleChildScrollView放入支架的功能,该支架在SingleChildScrollView上具有另一个不需要滚动的小部件。 例如,我有一个SingleChildScrollView,我需要在指定位置添加一个固定按钮,但是此按钮不会滚动。

我尝试使用Stack小部件,但是如果在SingleChildScrollView之前添加按钮小部件,则无法单击,否则,如果我在SingleChildScrollView之后添加按钮,则滚动触摸不起作用。

有人有问题吗?

2 个答案:

答案 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)

Joao非常感谢您,我制作了一个应用程序屏幕来向您解释我的问题。 这是我的应用程序,如您所见,应用程序栏下方是“我的徽标”: enter image description here

问题是我需要将徽标堆积在文本“ This is my appbar”下