2

可以将 SingleChildScrollView 放入 Scaffold 中，该 Scaffold 在 SingleChildScrollView 上有另一个不需要滚动的小部件。例如，我有一个 SingleChildScrollView，我需要将一个固定按钮添加到指定位置，但此按钮不会滚动。

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

有人有什么问题吗？

4

3 回答 3

7

现在我们了解了您想要实现的目标，可以使用 Stack 小部件、ListView 并使用 Align 小部件来定位包含要用作标题的小部件的容器：

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 位于视图的底部，可以使用bottomNavigationBarScaffold 的属性：

Scaffold(
  ...
  bottomNavigationBar: Container(
    alignment: Alignment.center,
    height: 50,
    child: Text('title')
  ),
)
于 2020-01-16T15:26:05.370 回答
1 
Scaffold(
  appBar: buildAppBar('Some cool appbar'),
  body: Column(
    children: [
      Expanded(
        child: SingleChildScrollView(
          child: Column(
            children: [
              PackageCard(),
              PackageCard(),
              PackageCard(),
            ],
          ),
        ),
      ),
      Container(
        child: Text('Your super cool Footer'),
        color: Colors.amber,
      )
    ],
  ),
);
于 2021-09-07T15:51:03.417 回答
0

Joao 非常感谢你，我制作了我的应用程序的屏幕来向你解释我的问题。这是我的应用程序，如您所见，“我的 LOGO”位于应用程序栏下方： 在此处输入图像描述

问题是我需要将我的徽标堆叠在“这是我的应用栏”文本下

于 2020-01-16T16:51:19.753 回答