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 Layout Row / Column - 共享宽度,扩展高度
在 Flutter 中,您如何制作动画以将容器从 0 高度扩展到其内容的高度?