在下一个屏幕的顶部放置一个小部件？

Question

我有一个SingleChildScrollView，它有一个包含许多子项的列小部件。我希望将一组按钮“放在下一个屏幕上”（例如“PageBreak小部件”）。

我已经尝试过了，但是它产生了一个异常，因为您只应该使用一个定位小部件和一个堆栈小部件（而不是列小部件）：

                      if (btnset is Spacer)
                        Positioned(
                            top: height,
                            child: SizedBox(
                                key: GlobalKey(
                                  debugLabel: "NEXTSCREEN",
                                ),
                                height: height / 2))

    return Scaffold(
      floatingActionButtonLocation: FloatingActionButtonLocation.centerFloat,
      floatingActionButton: Column(
          crossAxisAlignment: CrossAxisAlignment.center,
          mainAxisSize: MainAxisSize.max,
          children: [
            SizedBox(height: 80),
            if (_scrollController.hasClients && _scrollController.offset > 0)
              FloatingActionButton(
                  backgroundColor: Colors.white,
                  foregroundColor: Colors.blue,
                  child: Icon(Icons.arrow_upward),
                  mini: true,
                  heroTag: null,
                  onPressed: () {
                    if (_scrollController.hasClients)
                      _scrollController.animateTo(
                          _scrollController.offset -
                              _scrollController.position.viewportDimension,
                          duration: Duration(milliseconds: 500),
                          curve: Curves.ease);
                  }),
            Spacer(),
            if (_scrollController.hasClients &&
                _scrollController.offset <
                    _scrollController.position.maxScrollExtent)
              FloatingActionButton(
                  backgroundColor: Colors.white,
                  foregroundColor: Colors.blue,
                  mini: true,
                  heroTag: null,
                  child: Icon(Icons.arrow_downward),
                  onPressed: () {
                    if (_scrollController.hasClients)
                      _scrollController.animateTo(
                          _scrollController.offset +
                              _scrollController.position.viewportDimension,
                          duration: Duration(milliseconds: 500),
                          curve: Curves.ease);
                  }),
          ]),
      appBar: AppBar(
          title: Text(meshTag +
                  data['Name']
                      .strval() /*+
              "  " +
              StatusWord(data['Alarms'].val).toString()*/
              ),
          actions: [
            StatusWordWidget(
              data['Alarms'].val,
              short: true,
              direction: Axis.horizontal,
            ),
          ]),
      //drawer: Drawer(), //You do this, the back arrow goes away...
      body: !initialized
          ? Center(
              child:
                  CircularProgressIndicator()) //Circle of Death while we connect
          : Scrollbar(
              thickness: 8.0,
              isAlwaysShown: true,
              child: SingleChildScrollView(
                controller: _scrollController,
                child: Column(
                  mainAxisSize: MainAxisSize.min,
                  mainAxisAlignment: MainAxisAlignment.center,
                  verticalDirection: VerticalDirection.down,
                  children: <Widget>[
                    Container(
                        margin: EdgeInsets.fromLTRB(
                            0, 0, 10, 2), //Make room for scroll bar!
                        child: headerRow()),
                    Row(
                        mainAxisAlignment: MainAxisAlignment.center,
                        mainAxisSize: MainAxisSize.min,
                        children: <Widget>[
                          RotatedBox(
                              quarterTurns: -1,
                              child: ConstrainedBox(
                                  constraints: BoxConstraints.tightFor(
                                      height: 50, width: chartHeight),
                                  child: Center(
                                      child: SliderTheme(
                                          data: SliderThemeData(
                                              trackShape: CustomTrackShape()),
                                          child: Slider(
                                              value: localset * 1.0,
                                              max: maxy,
                                              min: miny,
                                              onChanged: (double value) {
                                                setState(() {
                                                  localset = value.toInt();
                                                });
                                              }))))),
                          Expanded(child: chartwidget)
                        ]),
                    if (localset != data['Setpoint'].val)
                      ElevatedButton(
                        child: Text('Set Setpoint to: ' + localset.toString()),
                        onPressed: (localset == data['Setpoint'].val)
                            ? null
                            : () {
                                //Write Value to Ble.
                                setState(() {
                                  data['Setpoint'].val = localset;
                                  data['Setpoint'].bttx();
                                });
                              },
                      ),
                    Divider(),
                    for (var btnset in mainButtons) ...[
                      if (btnset is Spacer)
                        SizedBox(
                            key: GlobalKey(
                              debugLabel: "NEXTSCREEN",
                            ),
                            height: height / 3)
                      else ...[btnset, Divider()]
                    ],
                    Divider(),
                    GestureDetector(
                      child: Divider(
                        thickness: 8,
                      ),
                      onLongPress: () {
                        showdev = true;
                      },
                    ),
                    if (showdev) ...{
                      ElevatedButton(
                          onPressed: () {
                            //Load the log
                            loadlogtext();
                          },
                          child: Text("Read")),
                      ConstrainedBox(
                          constraints: BoxConstraints(minWidth: 300),
                          child: Text(logtext)),
                      Divider(),
                      //ToDo: A debug datatable with all vars.
                      DataTable(
                        showCheckboxColumn: false,
                        columns: [
                          DataColumn(
                            label: Text("Name"),
                            numeric: false,
                            tooltip: "Name of parameter",
                          ),
                          DataColumn(
                            label: Expanded(child: Text("Value")),
                            numeric: true,
                            tooltip: "Signal Strength",
                          ),
                        ],
                        rows: DeviceData.entries
                            .map(
                              (item) => DataRow(
                                  onSelectChanged: (bool? selected) {
                                    print('Picked ${item.name}');
                                  },
                                  cells: [
                                    DataCell(Container(
                                      //width: 120,
                                      child: Text(item.name),
                                    )),
                                    DataCell(
                                      Container(
                                          width: 40,
                                          child: Text((item.isnum
                                              ? item.val.toString()
                                              : item.str == null
                                                  ? "<null>"
                                                  : item.str)!)),
                                    ),
                                  ]),
                            )
                            .toList(),
                      ),
                      Divider()
                    },
                    Row(
                      mainAxisAlignment: MainAxisAlignment.center,
                      mainAxisSize: MainAxisSize.min,
                      children: <Widget>[
                        Padding(
                          padding: EdgeInsets.all(20.0),
                          child: OutlinedButton(
                            child: Text('Back'),
                            onPressed: () {
                              Navigator.pop(context);
                            },
                          ),
                        ),
                      ],
                    ),
                    ConstrainedBox(
                        constraints: BoxConstraints(
                            minHeight: 40)) //Keep the button off the bottom...
                  ],
                ),
              )),
    );
  }
}

Answer 1

如果要更改堆栈外小部件的位置，可以使用transform.translate()。然而，对于您的情况，这并不是最理想的解决方案。

由于使用的是脚手架，所以可以将appbar设置为具有appbar()的列，然后将小部件保留在屏幕上，或者将小部件放在bottomnavigationbar()中。也可以使用customscrollview()，因为您可以使用滚动应用程序条，它在您滚动页面时会发生变化（详细信息请参阅https://api.flutter.dev/flutter/widgets/customscrollview-class.html)，或者nestedscrollview()，如果您觉得它更适合您的需要（详细信息请参阅https://api.flutter.dev/flutter/widgets/nestedscrollview-class.html）。

使用transform.translate()小部件对于您正在做的事情几乎从来都不是一个好的选择，因为它更难实现，并且将在更小的屏幕上工作。它也是“重新发明轮子”，因为Flutter已经提供了很多有用的方法来实现这一点，所以我建议你看看上面的小部件，并尝试找到一个最适合你的需要。