如果屏幕太小，如何保证表格可以水平滚动？

Question

我正在尝试让

Card

与

Table

一起使用，如果屏幕太小，可以

horizontally

滚动。

以下是相关代码：

Widget buildScrollableCard(Object m) {
  return MyCard(
    shadow: MyShadow(elevation: 0.5),
    child: Column(
      children: [
        Stack(
          alignment: AlignmentDirectional.center,
          children: <Widget>[
            SizedBox(
              height: 800,
              width: 2600,
              child: SingleChildScrollView(
                scrollDirection: Axis.horizontal,
                child: m.data!.rowCount > 0
                    ? buildTable(m, m.home, true)
                    : Text("Nothing to show"),
              ),
            ),
          ],
        ),
        
      ],
    ),
  );
}

Widget buildTable(Object m, Object t, bool h) {
  return MyCard(
    shadow: MyShadow(elevation: 0.5),
    child: Column(
      children: [
        Padding(
          padding: MySpacing.x(flexSpacing),
          child: PaginatedDataTable(
            header: Row(
              children: [
                MyText.titleMedium(
                  "Title",
                  fontWeight: 600,
                  fontSize: 20,
                ),
              ],
            ),
            arrowHeadColor: Colors.red,
            source: h ? m.data! : m.secondarydata!,
            columns: [
              DataColumn(
                  label: MyText.bodyMedium(
                'Name',
                fontWeight: 600,
              )),
              DataColumn(label: MyText.bodyMedium('1')),
              DataColumn(label: MyText.bodyMedium('2')),
              DataColumn(label: MyText.bodyMedium('3')),
              DataColumn(label: MyText.bodyMedium('4')),
              DataColumn(label: MyText.bodyMedium('5')),
              DataColumn(label: MyText.bodyMedium('6')),
              DataColumn(label: MyText.bodyMedium('7')),
              DataColumn(label: MyText.bodyMedium('8')),
              DataColumn(label: MyText.bodyMedium('9')),
              DataColumn(label: MyText.bodyMedium('10')),
            ],
            columnSpacing: 300,
            horizontalMargin: 28,
            rowsPerPage: 11,
          ),
        ),
      ],
    ),
  );
}

当

table

不适合页面时，它就无法滚动，所以我看不到所有列。

屏幕太小如何保证表格可以滚动？

编辑

以下代码是我的代码的最小化版本。垂直滚动但不水平滚动：

知道为什么吗？

import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('Horizontal Scroll Example'),
        ),
        body: SingleChildScrollView(
          scrollDirection: Axis.horizontal, // Set scroll direction to horizontal
          child: Row(
            children: List.generate(30, (index) {
              return Container(
                margin: EdgeInsets.all(10),
                color: Colors.blue,
                width: 100,
                height: 100,
                child: Center(
                  child: Text(
                    'Item $index',
                    style: TextStyle(color: Colors.white),
                  ),
                ),
              );
            }),
          ),
        ),
      ),
    );
  }
}

谢谢

Answer 1

您有多种选择可以考虑， 1-最适合我安装小尺寸的模拟器 2-尝试插入或写入保存太长数据的假对象