Question

如何使DataTable双向滚动。我使数据表水平滚动，但是列表很大，无法向下滚动。

>tsc dynamic.ts -t ES6 -m commonjs

需要帮助。预先感谢。

Answer 1

更新，更简便的方法。

从Flutter的最新更新开始，您还可以将DataTable属性设置为InteractiveViewer，将constrained包装在false小部件中。与早期解决方案不同，这将允许您同时水平和垂直滚动。它也是更少的代码，可让您放大/缩小DataTable。

祝你好运！

Answer 2

只需添加两个SingleChildScrollView：

child: SingleChildScrollView(
                scrollDirection: Axis.vertical,
                child: SingleChildScrollView(
                  scrollDirection: Axis.horizontal,
                  child: DataTable(

Answer 3

尝试使用此插件bidirectional_scroll_view。

Answer 4

我曾经以这种方式进行编码，并且效果很好：

import 'package:cloud_firestore/cloud_firestore.dart';
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:followmeifucan/constants/style_constants.dart';
import 'package:font_awesome_flutter/font_awesome_flutter.dart';


class RankScreen extends StatefulWidget {

  static String id = 'ranks_screen';

  @override
  _RankScreenState createState() => _RankScreenState();
}

class _RankScreenState extends State<RankScreen> {
  final _firestore = Firestore.instance;

  @override
  void initState() {
    super.initState();
  }

  List<DataCell> _createCellsForElement(DocumentSnapshot document){
    Timestamp timestamp = document.data['when'];
    return <DataCell>[
      DataCell(Text(document.data['name'].toString())),
      DataCell(Text(document.data['level'].toString())),
      DataCell(Text(document.data['round'].toString())),
      DataCell(Text(document.data['hits_ok'].toString())),
      DataCell(Text(timestamp.toDate().toString().substring(0, 16))),
      DataCell(Icon(document.data['plataform'].toString() == 'Android' ? Icons.android : FontAwesomeIcons.apple))
    ];
  }


  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        centerTitle: true,
        backgroundColor: Colors.black,
        title: Row(
          children: <Widget>[
            Flexible(
              child: Hero(
                tag: 'logo',
                child: Container(
                  height: 30.0,
                  child: Image.asset('images/default_icon.png'),
                ),
              ),
            ),
            SizedBox(width: 10.0,),
            Text('HIGHSOCRES'),
          ],
        ),
      ),
      body: SafeArea(
        child: Padding(
          padding: const EdgeInsets.all(8.0),
          child: SingleChildScrollView(
            scrollDirection: Axis.vertical,
            child: Column(
              children: <Widget>[
                StreamBuilder<QuerySnapshot>(
                stream:  _firestore.collection('ranks').snapshots(),
                builder: (context, snapshot){
                  List<DataRow> rankLines = new List<DataRow>();
                  if(snapshot.hasData){
                    final ranks = snapshot.data.documents;
                   for(var rankData in ranks){

                     rankLines.add(
                         DataRow(
                             cells: _createCellsForElement(rankData)
                         )
                     );
                   }
                  }
                  return Container(
                    child: SingleChildScrollView(
                      scrollDirection: Axis.horizontal,
                      child: DataTable(
                        sortAscending: true,
                        sortColumnIndex: 3,

                        columns: <DataColumn>[
                          DataColumn(label: Text('NAME', style: kRankLabelStyle,)),
                          DataColumn(label:Text('LEVEL', style: kRankLabelStyle,), numeric: true,),
                          DataColumn(label:Text('ROUND', style: kRankLabelStyle,), numeric: true,),
                          DataColumn(label:Text('HITS OK', style: kRankLabelStyle,), numeric: true,),
                          DataColumn(label:Text('WHEN', style: kRankLabelStyle,),),
                          DataColumn(label:Icon(Icons.phone_iphone)),
                        ],
                        rows: rankLines,
                      ),
                    ),
                  );
                },
              ),
              ]
            ),
          ),
        ),
      ),
    );
  }
}

在Flutter中使DataTable双向滚动

4 个答案: