Container 的高度在 Flutter 中拉伸,即使我输入较小的值?
height of Container is stretching in Flutter, even if i put smaller value?
我将 Container 的高度设置为 40,但它获得了父 Container 的高度。我认为 ListView.builder 正在拉伸它的子项,因为如果我用该 Container 的一行替换它(查看代码)它会按预期工作。
import 'package:flutter/material.dart';
class PaymentScreen extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(body: SafeArea(child: Column(children: [
Container(alignment: Alignment.center, height: 200,
child: ListView.builder(scrollDirection: Axis.horizontal, shrinkWrap: true,
itemBuilder: (BuildContext context, int index) =>
/// this Container is stretching, even it has definite height
Container(alignment: Alignment.center, margin: EdgeInsets.all(8), padding: EdgeInsets.all(8), color: Colors.amber,
/// this width is not listening to me!
width: 40, height: 40,
child: Text('${index + 1}'),),
itemCount: 31,),),],),),);
}
}
发生这种情况是因为容器的性质。容器自然会尝试尽可能多地吸收。要强制它成为您想要的大小,您需要添加一个中间小部件来说明您不希望容器填充的 space。
您可以使用的几个小部件是 Center
、Align
、Stack
与 Positioned
小部件一起使用。您甚至可以使用第二个 Container
,但是如果您必须使用 alignment
属性 来避免相同的结果。
我将 Container 的高度设置为 40,但它获得了父 Container 的高度。我认为 ListView.builder 正在拉伸它的子项,因为如果我用该 Container 的一行替换它(查看代码)它会按预期工作。
import 'package:flutter/material.dart';
class PaymentScreen extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(body: SafeArea(child: Column(children: [
Container(alignment: Alignment.center, height: 200,
child: ListView.builder(scrollDirection: Axis.horizontal, shrinkWrap: true,
itemBuilder: (BuildContext context, int index) =>
/// this Container is stretching, even it has definite height
Container(alignment: Alignment.center, margin: EdgeInsets.all(8), padding: EdgeInsets.all(8), color: Colors.amber,
/// this width is not listening to me!
width: 40, height: 40,
child: Text('${index + 1}'),),
itemCount: 31,),),],),),);
}
}
发生这种情况是因为容器的性质。容器自然会尝试尽可能多地吸收。要强制它成为您想要的大小,您需要添加一个中间小部件来说明您不希望容器填充的 space。
您可以使用的几个小部件是 Center
、Align
、Stack
与 Positioned
小部件一起使用。您甚至可以使用第二个 Container
,但是如果您必须使用 alignment
属性 来避免相同的结果。