如何滚动DataTable小部件中的DataRow项 [英] How to scroll DataRow items in DataTable widget

问题描述

我有 DataTable 小部件，其中包含四个 DataColumn 和许多 DataRow ，如图所示:

I have DataTable widget contains four DataColumn and many DataRow, As it is shown in the picture:

问题是我无法滚动带有保留标题的 DataRow 项目

The problem is that I cannot scroll DataRow items, with Keeping header,

我尝试了 SingleChildScrollView 小部件，但无济于事，结果是:

I tried SingleChildScrollView Widget but to no avail, The result is :

我想要的只是滚动内容数据表，而不是整个数据表.

What I want is just scroll the content DataTable and not the whole DataTable.

谢谢...

推荐答案

您需要创建自己的表小部件:

You need to create your own table widget:

import 'dart:math';

import 'package:flutter/material.dart';

Random random = Random();
void main() => runApp(
      MyApp(),
    );

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: Scaffold(
        appBar: AppBar(
          title: Text('Stackoverflow'),
        ),
        body: SafeArea(
          child: MyHomePage(),
        ),
      ),
    );
  }
}

class MyHomePage extends StatefulWidget {
  @override
  _MyHomePageState createState() => _MyHomePageState();
}

String getRandomDateString() =>
    DateTime.now().subtract(Duration(days: random.nextInt(100))).toString();

List<String> generateMockRowData() => [
      random.nextInt(10000).toString(),
      random.nextInt(10000).toString(),
      random.nextInt(10000).toString(),
      getRandomDateString()
    ];
List<List<String>> mockData =
    List<List<String>>.generate(300, (_) => generateMockRowData());

class _MyHomePageState extends State<MyHomePage> {
  @override
  Widget build(BuildContext context) {
    return Container(
      color: Color(0xFFF4F1F1),
      child: Column(
        crossAxisAlignment: CrossAxisAlignment.stretch,
        children: <Widget>[
          SizedBox(height: 10),
          _header(),
          SizedBox(height: 10),
          Divider(
            height: 1,
          ),
          Flexible(
            child: ListView.separated(
              itemBuilder: (_, index) {
                return Padding(
                  padding: EdgeInsets.only(top: index == 0 ? 10 : 0),
                  child: _getRow(mockData[index]),
                );
              },
              separatorBuilder: (_, __) => Divider(),
              itemCount: mockData.length,
            ),
          )
        ],
      ),
    );
  }

  _header() {
    return Row(
      children: <Widget>[
        _element(Text(
          'Col4',
          textAlign: TextAlign.end,
        )),
        _element(Text(
          'Col3',
          textAlign: TextAlign.end,
        )),
        _element(Text(
          'Col2',
          textAlign: TextAlign.end,
        )),
        _element(
            Text(
              'Col1',
              textAlign: TextAlign.end,
            ),
            2),
      ],
    );
  }

  Flexible _element(Widget widget, [flex = 1]) {
    return Flexible(
      fit: FlexFit.tight,
      flex: flex,
      child: widget,
    );
  }

  Widget _getRow(List<String> data) {
    return Row(
      children: [
        _element(Text(
          data[0],
          textAlign: TextAlign.end,
        )),
        _element(Text(
          data[1],
          textAlign: TextAlign.end,
        )),
        _element(Text(
          data[2],
          textAlign: TextAlign.end,
        )),
        _element(
            Text(
              data[3],
              textAlign: TextAlign.end,
            ),
            2),
      ],
    );
  }
}

这篇关于如何滚动DataTable小部件中的DataRow项的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！