Question

这是我的代码

child: Scaffold(
        resizeToAvoidBottomPadding: false,
        appBar: AppBar(),
        drawer: MyDrawer(),
        body: SingleChildScrollView(
          child: Column(
            mainAxisSize: MainAxisSize.min,
            // direction: Axis.vertical,
            children: [
              Container(
                height: 400,
                child: Text('PageOne'),
              ),
              IntrinsicHeight(
                child: Expanded(
                  child: Container(
                    width: double.infinity,
                    color: Colors.grey,
                    child: Text(
                      'Hi',
                      textAlign: TextAlign.center,
                    ),
                  ),
                ),
              ),
            ],
          ),
        ),
      ),

我希望屏幕截图中的这个灰色容器将高度填充为最小高度，我需要通过旋转屏幕手机来响应它，并且对于所有手机屏幕尺寸，由于使用了不限高度，我只在使用SingleChildScrollView时才采用静态高度尺寸。尝试找到方法让他将屏幕的剩余高度作为容器的最小高度。

有什么想法吗？

Answer 1

如果知道，则可以使用LayoutBuilder和ConstrainedBox的组合，如下所示：

import 'dart:math';

import 'package:flutter/material.dart';

main() {
  runApp(MaterialApp(home: MyApp()));
}

class MyApp extends StatelessWidget {
  final double headerHeight = 400;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      resizeToAvoidBottomPadding: false,
      appBar: AppBar(),
      body: LayoutBuilder(
          builder: (BuildContext context, BoxConstraints constraints) {
            return SingleChildScrollView(
              child: Column(
                mainAxisSize: MainAxisSize.min,
                // direction: Axis.vertical,
                children: [
                  Container(
                    color: Colors.red,
                    height: headerHeight,
                    child: Text('PageOne'),
                  ),
                  ConstrainedBox(
                    constraints: new BoxConstraints(
                      minHeight: max(0, constraints.maxHeight - headerHeight),
                    ),
                    child: Container(
                      width: double.infinity,
                      color: Colors.grey,
                      child: Text(
                        'Hi',
                        textAlign: TextAlign.center,
                      ),
                    ),
                  ),
                ],
              ),
            );
          }
      ),
    );
  }
}

如果您不知道，则我将使用一个（或多个）键来获取它们的大小，并使用与上述相同的小部件树。

在SingleChildScrollView窗口小部件中使窗口小部件扩展为最小高度

1 个答案: