調整瀏覽器大小時FlutterPaginatedDataTable導致溢位-有解無憂

我有一個包含在帶有滾動條的串列中的網頁。正文是 SideNavigationBar 和內容。內容部分是PagingatedDataTable。當我調整瀏覽器的大小時，我看到滾動有效。但是，PaginatedDataTable總是拋出溢位錯誤并且不跟隨父級的滾動。我應該如何布局我的代碼以強制包含PaginatedDataTable在滾動區域中。

import 'package:edar_app/cubit/auth/auth_cubit.dart';
import 'package:edar_app/locator.dart';

import 'package:flutter/material.dart';
import 'package:flutter_bloc/flutter_bloc.dart';
import 'package:side_navigation/side_navigation.dart';

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

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      // scrollBehavior: MyCustomScrollBehavior(),
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.green,
      ),

      home: BlocProvider(
        create: (context) => AuthCubit(),
        child: HomePageScroll(),
      ),
    );
  }
}

class HomePageScroll extends StatefulWidget {
  HomePageScroll();

  @override
  _HomePageScrollState createState() => _HomePageScrollState();
}

class _HomePageScrollState extends State<HomePageScroll> {
  int selectedIndex = 0;

  @override
  Widget build(BuildContext context) {
    // });

    List<DataColumn> dataColumns = [
      DataColumn(label: Text("Col 1")),
      DataColumn(label: Text("Col 2")),
    ];
    // Future.delayed(const Duration(milliseconds: 3000), () {
    var dataTable = PaginatedDataTable(
      columns: dataColumns,
      source: DataSource(),
      showCheckboxColumn: false,
      dataRowHeight: 40,
      columnSpacing: 40,
      horizontalMargin: 10,
      rowsPerPage: 10,
      showFirstLastButtons: true,
    );

    List<SideNavigationBarItem> menuList = [
      SideNavigationBarItem(icon: Icons.home, label: "Home"),
    ];

    List content = [
      SizedBox(
        height: MediaQuery.of(context).size.height,
        child: dataTable,
      )
    ];
    return MaterialApp(
      home: Scaffold(
        body: Scrollbar(
          child: ListView(
            shrinkWrap: true,
            physics: const NeverScrollableScrollPhysics(),
            children: [
              ConstrainedBox(
                constraints: BoxConstraints(
                  maxWidth: MediaQuery.of(context).size.width,
                  maxHeight: MediaQuery.of(context).size.height,
                ),
                child: Row(
                  children: [
                    SideNavigationBar(
                      // header: SideNavigationBarHeader(
                      //   title: Text(""),
                      //   subtitle: Text(""),
                      //   image: Column(
                      //       mainAxisAlignment: MainAxisAlignment.start,
                      //       crossAxisAlignment: CrossAxisAlignment.start,
                      //       children: [
                      //         Image.asset("/images/edar_logo.jpg"),
                      //         // Divider(),
                      //         // Text("login"),
                      //       ]),
                      // ),
                      theme: SideNavigationBarTheme(
                        backgroundColor: Colors.white,
                        togglerTheme: SideNavigationBarTogglerTheme.standard(),
                        itemTheme: SideNavigationBarItemTheme(
                          unselectedItemColor: Colors.grey[900],
                        ),
                        dividerTheme: SideNavigationBarDividerTheme.standard(),
                      ),
                      selectedIndex: selectedIndex,
                      items: menuList,
                      toggler: SideBarToggler(
                          expandIcon: Icons.keyboard_arrow_right,
                          shrinkIcon: Icons.keyboard_arrow_left,
                          onToggle: () {
                            print('Toggle');
                          }),
                      onTap: (int value) {},
                    ),
                    Expanded(
                      child: content[selectedIndex],
                    )
                  ],
                ),
              )
            ],
          ),
        ),
      ),
    );
  }
}

class DataSource extends DataTableSource {
  @override
  DataRow? getRow(int index) {
    // TODO: implement getRow
    DataRow.byIndex(cells: [
      DataCell(Text("text 1")),
      DataCell(Text("text 2")),
    ]);
  }

  @override
  // TODO: implement isRowCountApproximate
  bool get isRowCountApproximate => false;

  @override
  // TODO: implement rowCount
  int get rowCount => 2;

  @override
  // TODO: implement selectedRowCount
  int get selectedRowCount => 0;
}

在調整到 PaginatedDataTable 之前調整瀏覽器大小時 Flutter PaginatedDataTable 導致溢位

調整到 PaginatedDataTable 后調整瀏覽器大小時 Flutter PaginatedDataTable 導致溢位

uj5u.com熱心網友回復：

這是因為您為內容添加了具有桌面高度的sizedBox。實際上，當您呼叫MediaQuery.of(context).size.height時，它會回傳您的桌面高度，而不是您的瀏覽器高度，這就是您在調整瀏覽器大小時遇到??問題的原因。如果您從串列視圖中移除側邊導航，這樣在您的頁面上滾動就不會在您的側邊導航上滾動，這也會更好。我還從您的 listView 中洗掉了 物理： const NeverScrollableScrollPhysics()，因此它可以滾動。下面是代碼（我已經洗掉了你的 bloc，所以我可以測驗它，你可以按原樣再次添加它）：


import 'package:flutter/material.dart';

import 'package:side_navigation/side_navigation.dart';

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

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      // scrollBehavior: MyCustomScrollBehavior(),
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.green,
      ),

      home: HomePageScroll(),
    );
  }
}

class HomePageScroll extends StatefulWidget {
  HomePageScroll();

  @override
  _HomePageScrollState createState() => _HomePageScrollState();
}

class _HomePageScrollState extends State<HomePageScroll> {
  int selectedIndex = 0;

  @override
  Widget build(BuildContext context) {
    // });
    List<SideNavigationBarItem> menuList = [
      SideNavigationBarItem(icon: Icons.home, label: "Home"),
    ];

    List<DataColumn> dataColumns = [
      DataColumn(label: Text("Col 1")),
      DataColumn(label: Text("Col 2")),
    ];
    // Future.delayed(const Duration(milliseconds: 3000), () {
    var dataTable = PaginatedDataTable(
      columns: dataColumns,
      source: DataSource(),
      showCheckboxColumn: false,
      dataRowHeight: 40,
      columnSpacing: 40,
      horizontalMargin: 10,
      rowsPerPage: 10,
      showFirstLastButtons: true,
    );

    List content = [dataTable];
    return MaterialApp(
      home: Scaffold(
        body: Row(
          children: [
            Container(
              width: 200,
              child: SideNavigationBar(
                // header: SideNavigationBarHeader(
                //   title: Text(""),
                //   subtitle: Text(""),
                //   image: Column(
                //       mainAxisAlignment: MainAxisAlignment.start,
                //       crossAxisAlignment: CrossAxisAlignment.start,
                //       children: [
                //         Image.asset("/images/edar_logo.jpg"),
                //         // Divider(),
                //         // Text("login"),
                //       ]),
                // ),
                theme: SideNavigationBarTheme(
                  backgroundColor: Colors.white,
                  togglerTheme: SideNavigationBarTogglerTheme.standard(),
                  itemTheme: SideNavigationBarItemTheme(
                    unselectedItemColor: Colors.grey[900],
                  ),
                  dividerTheme: SideNavigationBarDividerTheme.standard(),
                ),
                selectedIndex: selectedIndex,
                items: menuList,
                toggler: SideBarToggler(
                    expandIcon: Icons.keyboard_arrow_right,
                    shrinkIcon: Icons.keyboard_arrow_left,
                    onToggle: () {
                      print('Toggle');
                    }),
                onTap: (int value) {},
              ),
            ),
            Expanded(
              child: Scrollbar(
                child: ConstrainedBox(
                  constraints: BoxConstraints(
                    maxHeight: MediaQuery.of(context).size.height,
                  ),
                  child: ListView(
                    shrinkWrap: true,
                    children: [content[selectedIndex]],
                  ),
                ),
              ),
            ),
          ],
        ),
      ),
    );
  }
}

class DataSource extends DataTableSource {
  @override
  DataRow? getRow(int index) {
    // TODO: implement getRow
    DataRow.byIndex(cells: [
      DataCell(Text("text 1")),
      DataCell(Text("text 2")),
    ]);
  }

  @override
  // TODO: implement isRowCountApproximate
  bool get isRowCountApproximate => false;

  @override
  // TODO: implement rowCount
  int get rowCount => 2;

  @override
  // TODO: implement selectedRowCount
  int get selectedRowCount => 0;
}

希望這可以解決您的問題。

轉載請註明出處，本文鏈接：https://www.uj5u.com/qukuanlian/523379.html

標籤：扑镖扑网单子滚动视图分页数据表

上一篇：引數型別“功能？”不能分配給引數型別“voidFunction(String)?”。這段代碼有修復嗎？

下一篇：如何在Flutter中調整圖示和文本的位置？