Question

我想要一个DataTable（），它显示锁定在左侧的不可滚动列。（“时间”列），而右侧的日期则可以像在excel中使用“冻结列”一样滚动。

我的方法是从带有日期的工作SingleChildScrollView小部件开始，然后将其添加到具有不可滚动小部件的行中。但是，当我添加带有不可滚动和可滚动窗口小部件的行窗口小部件时，SingleChildScrollView会“锁定”并在右侧溢出。

我创建了一个飞镖板以在此处显示我的代码： https://dartpad.dev/c7c35fcd605837159f91e12a25a2b4d7

飞镖盘开始时我尝试将其注释掉以显示有效的SingleChildScrollView。您可以看到我如何通过取消注释脚手架顶部的四行和末尾的三行来使其发挥作用。

以防万一无法使用dartpad，以下是代码，包括注释后的使之工作的尝试：

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      debugShowCheckedModeBanner: false,
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}

class MyHomePage extends StatelessWidget {
  MyHomePage({Key key, this.title}) : super(key: key);

  final String title;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(title),
      ),
      body: 
//       SafeArea( child: //  <--- uncomment out
//             Row( //  <--- uncomment out
//             children: [ // <--- uncomment out
//            TestTimeData(label: "Times"), // <--- uncomment out
            SingleChildScrollView(
              scrollDirection: Axis.horizontal,
              child: Row(
                children: [ // <--- comment this out
                  TestDayData(label: "   Monday\n 03-09-2020"),
                  TestDayData(label: "   Tuesday\n 03-10-2020"),
                  TestDayData(label: " Wednesday\n 03-11-2020"),
                  TestDayData(label: "  Thursday\n 03-12-2020"),
                  TestDayData(label: "    Friday\n 03-13-2020"),
                  TestDayData(label: "  Saturday\n 03-14-2020"),
                  TestDayData(label: "    Sunday\n 03-15-2020"),
                ],
              ),
            ),
//           ], // <--- uncomment out
//         ), // <--- uncomment out
//       ), //  <--- uncomment out
    );
  }
}

class TestDayData extends StatelessWidget {
  final List<String> timesList = [
    "This is",
    "a bunch",
    "of strings",
  ];

  final String label;

  TestDayData({Key key, this.label}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Container(
      child: DataTable(
        showCheckboxColumn: false,
        columns: [
          DataColumn(
            label: Center(child: Text(label)),
            numeric: false,
          ),
        ],
        rows: timesList
            .map(
              (times) => DataRow(cells: [
                DataCell(
                  Text(times.toString()),
                ),
              ]),
            )
            .toList(),
      ),
    );
  }
}

class TestTimeData extends StatelessWidget {
  final List<String> timesList = [
    "08:00",
    "09:00",
    "10:00",
  ];

  final String label;

  TestTimeData({Key key, this.label}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Container(
      child: DataTable(
        showCheckboxColumn: false,
        columns: [
          DataColumn(
            label: Center(child: Text(label)),
            numeric: false,
          ),
        ],
        rows: timesList
            .map(
              (times) => DataRow(cells: [
                DataCell(
                  Text(times.toString()),
                ),
              ]),
            )
            .toList(),
      ),
    );
  }
}

颤振的水平布局-滚动控件（SingleChildScrollView）旁边的不可滚动控件

0 个答案: