18
votes

Rendre DataTable Scroll bidirectionnel dans Flutter

Comment rendre DataTable Scroll bidirectionnel. J'ai fait le défilement datable horizontalement mais ma liste est grande et ne peut pas faire défiler vers le bas.

@override 
Widget build(BuildContext context) { 
    return Scaffold(
      appBar: AppBar(title: Text("Bills Receivable"),),
      body:SingleChildScrollView( 
        scrollDirection: Axis.horizontal, 
        child:
           DataTable(
          columns: <DataColumn>[
            DataColumn(label:Text("BNm",style: TextStyle(fontWeight: FontWeight.bold),)),
            DataColumn(label:Text("BDt",style: TextStyle(fontWeight: FontWeight.bold),)),
            DataColumn(label:Text("BPrty",style: TextStyle(fontWeight: FontWeight.bold),)),
            DataColumn(label:Text("BdueDt",style: TextStyle(fontWeight: FontWeight.bold),)),
            DataColumn(label:Text("Dys",style: TextStyle(fontWeight: FontWeight.bold),)),
            DataColumn(label:Text("BAmt",style: TextStyle(fontWeight: FontWeight.bold),)),
            DataColumn(label:Text("BPAmt",style: TextStyle(fontWeight: FontWeight.bold),)),
            DataColumn(label:Text("BBAmt",style: TextStyle(fontWeight: FontWeight.bold),))
          ], rows:  widget.rdata.bRecDtl.map((e)=>
            DataRow(
              cells:<DataCell>[
                DataCell(Text(e.bNm.toString())),
                DataCell(Text(e.bDt.toString())),
                DataCell(Text(e.bPrty.toString())),
                DataCell(Text(e.bdueDt.toString())),
                DataCell(Text(e.dys.toString())), 
                DataCell(Text(e.bAmt.toString())),
                DataCell(Text(e.bPAmt.toString())),
                DataCell(Text(e.bBAmt.toString())),
          ])).toList()
        ),
      ),
    );
  }

flutter flutter-layout

0 commentaires

4 Réponses :

2
votes

Essayez d'utiliser ce plugin bidirectional_scroll_view .

1 commentaires

Merci, j'ai simplement utilisé ListView au-dessus de SingleChildScrollView

31
votes

Ajoutez simplement deux SingleChildScrollView s:

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

0 commentaires

1
votes

J'avais l'habitude de coder de cette façon, et cela fonctionne bien:

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,
                      ),
                    ),
                  );
                },
              ),
              ]
            ),
          ),
        ),
      ),
    );
  }
}

0 commentaires

5
votes

Un moyen plus récent et plus simple.

Depuis la dernière mise à jour Flutter, vous pouvez également envelopper votre DataTable dans un widget InteractiveViewer avec la propriété constrained définie sur false . Contrairement aux solutions précédentes, cela vous permettra de faire défiler à la fois horizontalement et verticalement. C'est également moins de code et vous permet de zoomer / dézoomer sur votre DataTable.

Bonne chance!

0 commentaires