顫振| 設計數據表以在垂直視圖中適合全屏的最佳方法是什么？

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

Answer 2

我們可以使用 FittedBox 來適應數據表的高度並讓它水平滾動。

SingleChildScrollView(
                      scrollDirection: Axis.horizontal,
                      child:
    FittedBox(
                          fit: BoxFit.fitHeight,
                          child: DataTable(

                              //sortAscending: false,
                              //sortColumnIndex: 2,
                              columns: <DataColumn>[
                          DataColumn(
                          label: Text("No",textScaleFactor: 1,),
                          numeric: false,
                          ),
                          DataColumn(
                            label: Text("Name",textScaleFactor: 1,),
                            numeric: false,
                          ),
                          DataColumn(
                            label: Text("Delay\nMinutes",textScaleFactor: 1,),
                            numeric: false,
                          ),
                      ],
                            rows: TrainDelayedList.map((t) =>
                                DataRow(cells: [
                                  DataCell(
                                    Text(t.trainno,textScaleFactor: 1,),
                                  ),
                                  DataCell(
                                      Text(t.trainname,maxLines: 3,textScaleFactor: 1,)
                                  ),
                                  DataCell(
                                      Text(t.delayatstn.toString(),textScaleFactor: 1,)
                                  ),
                                ])).toList()

                          ),
                        ))