颤振| 设计数据表以在垂直视图中适合全屏的最佳方法是什么？

Question

Flutter 中的最佳视图或实现更好 UX 的最佳实践是什么？

垂直文本视图看起来太小：

 SingleChildScrollView bodyData() =>
   SingleChildScrollView(
  scrollDirection: Axis.vertical,
       padding: EdgeInsets.all(1.2),
  child: FittedBox(fit:BoxFit.fill,

  child:
   DataTable(

          sortColumnIndex: 1,
          sortAscending: true,

          columns: <DataColumn>[
            DataColumn(

              label: Text("Company"),
              onSort: (_, __) {
                setState(() {
                  widget.photos.sort((a, b) =>
                      a.data["quote"]["companyName"]
                          .compareTo(b.data["quote"]["companyName"]));
                });
              },
            ),
            DataColumn(

              label: Text("ttmDivRate"),
              numeric: true,
              onSort:   (_,__) {
                setState(() {
                  widget.photos.sort((a, b) =>
                      a.data["stats"]["ttmDividendRate"]
                          .compareTo(b.data["stats"]["ttmDividendRate"]));

查看代码： 水平视图很好：

Answer 1

尝试用另一个 SingleChildScrollView 包装 DataTable 并将 scrollDirection 设置为 Axis.horizo​​ntal。这样您就可以增加文本大小，并且仍然可以水平滚动以查看所有内容。

下面是一个例子：

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        backgroundColor: Colors.black54,
        appBar: AppBar(),
        body: Center(
          child: Container(
            color: Colors.white,
            height: 130,
            child: SingleChildScrollView(
              scrollDirection: Axis.vertical,
              child: SingleChildScrollView(
                scrollDirection: Axis.horizontal,
                child: DataTable(
                  columns: <DataColumn>[
                    DataColumn(
                      label: Text('Column 1'),
                    ),
                    DataColumn(
                      label: Text('Column 2'),
                    ),
                    DataColumn(
                      label: Text('Column 3'),
                    ),
                    DataColumn(
                      label: Text('Column 4'),
                    ),
                    DataColumn(
                      label: Text('Column 5'),
                    ),
                    DataColumn(
                      label: Text('Column 6'),
                    ),
                  ],
                  rows: <DataRow>[
                    DataRow(
                      cells: <DataCell>[
                        DataCell(Text('Data')),
                        DataCell(Text('Data')),
                        DataCell(Text('Data')),
                        DataCell(Text('Data')),
                        DataCell(Text('Data')),
                        DataCell(Text('Data')),
                      ],
                    ),
                    DataRow(
                      cells: <DataCell>[
                        DataCell(Text('Data')),
                        DataCell(Text('Data')),
                        DataCell(Text('Data')),
                        DataCell(Text('Data')),
                        DataCell(Text('Data')),
                        DataCell(Text('Data')),
                      ],
                      ),
                    DataRow(
                      cells: <DataCell>[
                        DataCell(Text('Data')),
                        DataCell(Text('Data')),
                        DataCell(Text('Data')),
                        DataCell(Text('Data')),
                        DataCell(Text('Data')),
                        DataCell(Text('Data')),
                      ],
                      ),
                  ],
                ),
              ),
            ),
          ),
        ),
      ),
    );
  }
}