Flutter:最小高度,扩展和 SingleChildScrollView?

Posted

技术标签:

【中文标题】Flutter:最小高度,扩展和 SingleChildScrollView?【英文标题】:Flutter: min height, Expanded and SingleChildScrollView? 【发布时间】:2020-02-23 05:28:44 【问题描述】:

我不知道如何在 Flutter 中进行这种布局。我想要实现的是:

我有一个列,包含一个固定高度的子项(标题文本小部件)和两个扩展小部件。我正在使用扩展,因为我希望每个人共享剩余屏幕的一半。 当方向更改为横向时,没有足够的空间正确显示展开的小部件的内容。所以我想要的是在这 2 个小部件上应用一个最小高度,并让它变得可滚动。

我希望这是有道理的 - 我不知道如何实现这一点。我已经尝试了很多扩展、灵活、列、SingleChildScrollView、最小列轴大小等的组合,但我尝试的一切都会导致某种无限高度异常。这甚至可能吗?

这里有一些示例代码:以下工作正常。如何在两个占位符上实现滚动和最小高度?

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget 
  @override
  Widget build(BuildContext context) 
    return MaterialApp(
      home: MyHomePage(),
    );
  


class MyHomePage extends StatelessWidget 
  @override
  Widget build(BuildContext context) 
    return Scaffold(
      body: SafeArea(
        child: Column(
          children: <Widget>[
            Text("Title"),
            // I need to apply a minimum height on these two widgets,
            // and it should be scrollable if necessary:
            Expanded(
              child: Placeholder(),
            ),
            Expanded(
              child: Placeholder(),
            )
          ],
        ),
      ),
    );
  


【问题讨论】:

【参考方案1】:

这对我有用:

import 'dart:math'; // for max function

// Add the following around your column
LayoutBuilder(
  builder: (BuildContext context, BoxConstraints constraints) 
    return SingleChildScrollView(
      child: ConstrainedBox(
        constraints: BoxConstraints.tightFor(height: max(500, constraints.maxHeight)),
        child: Column(), // your column
      ),
    );
  ,
);

500 替换为您希望列的最小高度。

【讨论】:

为我工作。我的场景是堆栈,其中包含一个高度可以是无限的滚动视图。应该使用 LayoutBuilder 来限制其内容的高度。【参考方案2】:

改用灵活

double height = MediaQuery.of(context).size.height;
Container(
  height:height
  child:Column(
  crossAxisAlignment: CrossAxisAlignment.start,
  children: <Widget>[
    Flexible(
     child:Container()
    ),
    Container(
     height:200
    ) 
  ])
)

【讨论】:

以上是关于Flutter:最小高度,扩展和 SingleChildScrollView?的主要内容,如果未能解决你的问题,请参考以下文章

flutter Container()最小宽度 最小高度

flutter Container()最小宽度 最小高度

Flutter Layout Row / Column - 共享宽度,扩展高度

在 Flutter 中,您如何制作动画以将容器从 0 高度扩展到其内容的高度?

输入文本时自动扩展的 Flutter 文本字段,然后在达到特定高度时开始滚动文本

Flutter:ListView最大高度