Flutter 中的可拖动滚动条到 DataTable 中

Question

我有一个带有 SingleChildScrollView 的 DataTable，它工作正常，我可以用鼠标滚动，但我也想要一个可拖动的 滚动条，有人知道怎么做吗？

这是我的带有 SingleChildScrollView 代码的 DateTable：

    return SingleChildScrollView(
  scrollDirection: Axis.horizontal,
  child: SingleChildScrollView(
    child: DataTable(
      dataTextStyle:
          TextStyle(color: Colors.black, fontStyle: FontStyle.italic),
      columns: [
        DataColumn(numeric: true, label: Text('Codigo')),
        DataColumn(label: Text('Nombre')),
        DataColumn(label: Text('Direccion')),
        DataColumn(label: Text('Telefono')),
        DataColumn(label: Text('Acciones')),
      ],
      rows: provider.sede.data
          .map((data) => DataRow(cells: [
                DataCell(Text(data.codigo.toString())),
                DataCell(
                  Text(data.nombre),
                ),
                DataCell(Text(data.direccion)),
                DataCell(Text(data.telefono)),
                DataCell(Container(
                  child: Row(
                    mainAxisAlignment: MainAxisAlignment.spaceAround,
                    children: <Widget>[
                      IconButton(
                        icon: Icon(Icons.edit),
                        iconSize: 20,
                        color: Colors.green,
                        splashRadius: 20,
                        tooltip: 'Editar',
                        onPressed: () {
                          Navigator.pushNamed(context, '/crearSedes',
                              arguments: {
                                'direccion': data.direccion,
                                'telefono': data.telefono,
                                'nombre': data.nombre,
                              });
                        },
                      ),
                      IconButton(
                        icon: Icon(Icons.delete),
                        iconSize: 20,
                        color: Colors.red,
                        splashRadius: 20,
                        tooltip: 'Eliminar',
                        onPressed: () {
                          showAlertDialog(BuildContext context) {
                            Widget cancelButton = FlatButton(
                              child: Text("Cancelar"),
                              onPressed: () {
                                Navigator.of(context).pop();
                              },
                            );
                            Widget continueButton = FlatButton(
                              child: Text("Eliminar"),
                              onPressed: () {
                                provider.EliminarSedes(
                                    data.codigo.toString());
                                Navigator.of(context).pop();
                                Scaffold.of(context).showSnackBar(SnackBar(
                                  elevation: 16.0,
                                  behavior: SnackBarBehavior.floating,
                                  duration: Duration(seconds: 2),
                                  shape: RoundedRectangleBorder(
                                    borderRadius: BorderRadius.all(
                                        Radius.circular(15)),
                                  ),
                                  backgroundColor: Colors.red,
                                  content: Text(
                                      "Se ha eliminado la sede ${data.nombre}",
                                      style: TextStyle(
                                          fontStyle: FontStyle.italic,
                                          fontSize: 20)),
                                ));
                              },
                            );
                            AlertDialog alert = AlertDialog(
                              title: Text("Eliminar"),
                              content: Text(
                                  "¿Seguro que quieres eliminar la sede ${data.nombre.toString()}?"),
                              actions: [
                                cancelButton,
                                continueButton,
                              ],
                            );
                            showDialog(
                              context: context,
                              builder: (BuildContext context) {
                                return alert;
                              },
                            );
                          }

                          showAlertDialog(context);
                        },
                      ),
                    ],
                  ),
                )),
              ]))
          .toList(),
    ),
  ),
);

My DataTable

我想在我的 DataTable 上显示这样的内容

Draggable Scroll bar

我用draggable_scrollbar试过了，但没有成功，有可能变成DataTable吗？ 可能是我在实施中犯了一些错误。

Answer 1

• 编辑：您可以在 pub.dev 上使用 draggable_scrollable 包

---

使用 Scrollbar 小部件包装您的 SingleChildScrollView。您可以在 Scrollbar 中嵌套任何可滚动的小部件，它会在右侧显示该栏。