如何在 Flutter 中使容器可滚动？

Question

我有以下页面代码/小部件：

import 'package:flutter/material.dart';
import '../constants.dart';
import '../util/my_box.dart';
import '../util/my_tile.dart';

class DesktopScaffold extends StatefulWidget {
  const DesktopScaffold({Key? key}) : super(key: key);

  @override
  State<DesktopScaffold> createState() => _DesktopScaffoldState();
}

class _DesktopScaffoldState extends State<DesktopScaffold> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
        backgroundColor: defaultBackgroundColor,
        appBar: myAppBar,
        body: LayoutBuilder(
      builder: (context, constraints) =>  Padding(
            padding: const EdgeInsets.all(8.0),
            child: Row(
              crossAxisAlignment: CrossAxisAlignment.start,
              children: [
                // open drawer
                myDrawer,
        
                // first half of page
                Expanded(
                  flex: 2,
                  child: Column(
                    children: [
                      // first 4 boxes in grid
                      ConstrainedBox(
                        constraints: BoxConstraints(
                          maxHeight: constraints.maxHeight - 16,
                        ),
                        child: AspectRatio(
                          aspectRatio: 4,
                          child: SizedBox(
                            width: double.infinity,
                            child: GridView.builder(
                              itemCount: 4,
                              gridDelegate:
                                  const SliverGridDelegateWithFixedCrossAxisCount(
                                      crossAxisCount: 4),
                              itemBuilder: (context, index) {
                                return MyBox();
                              },
                            ),
                          ),
                        ),
                      ),
        
                      // list of previous days
                      Expanded(
                        child: ListView.builder(
                          itemCount: 7,
                          itemBuilder: (context, index) {
                            return const MyTile();
                          },
                        ),
                      ),
                    ],
                  ),
                ),
                // second half of page
                Expanded(
                  child: Column(
                    children: [
                      // right menu 1
                      Expanded(
                        child: Padding(
                          padding: const EdgeInsets.all(8.0),
                          child: Container(
                            height: double.infinity,
                            decoration: BoxDecoration(
                              borderRadius: BorderRadius.circular(8),
                              color: Colors.blue[400],
                            ),
                          ),
                        ),
                      ),
                      // right menu 2
                      Expanded(
                        child: Padding(
                          padding: const EdgeInsets.all(8.0),
                          child: Container(
                            decoration: BoxDecoration(
                              borderRadius: BorderRadius.circular(8),
                              color: Colors.red[200],
                            ),
                          ),
                        ),
                      ),
                    ],
                  ),
                ),
              ],
            ),
          ),
        ),
      );
  }
}

问题是当我降低正在运行的应用程序窗口的高度时，

right menu1

和

right menu 2

小部件会调整大小，但我想要的是 2 个可滚动但不可调整大小的恒定大小容器。我试图将它们放在

SingleChildScrollView

小部件中，但它没有用。

PS：我还有第二个问题，当我将正在运行的应用程序窗口的高度降低到零时，它显示一个红色页面，并显示以下错误消息：

boxconstraints 具有非标准化的高度约束

也很高兴让我知道如何修复第二个错误。

Answer 1

在容器中使用 Box Constraints

constraints: BoxConstraints(
  minHeight: 100, 
  minWidth: 100,
  maxHeight: 400
)

然后在 singleChildScrollView 中扭曲父容器小部件。