flutter - 如何滚动 DataTable 小部件中的 DataRow 项目

Question

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

问题是我无法滚动 DataRow 项目，并保持标题，

我尝试了SingleChildScrollView Widget但没有成功，结果是:

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

谢谢...

Answer 1

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

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