即使宽度设置为 50,容器也会占用整个宽度
Posted
技术标签:
【中文标题】即使宽度设置为 50,容器也会占用整个宽度【英文标题】:Container takes entire width even though the width is set to 50 【发布时间】:2021-09-26 08:41:13 【问题描述】:我观察到一种非常奇怪的行为。我已将Container
的width
设置为50
,即使它占用了整个屏幕的width
。
import 'package:flutter/material.dart';
class AppDrawerNew extends StatelessWidget
@override
Widget build(BuildContext context)
return Container(
width: 50,
color: Colors.green,
);
我也尝试将Container
包装在SizedBox
中。即使这样,它也占据了整个屏幕的width
。
class AppDrawerNew extends StatelessWidget
@override
Widget build(BuildContext context)
return SizedBox(
width: 50.0,
child: Container(
color: Colors.green,
),
);
我不确定我到底做错了什么。接下来我可以尝试什么?
【问题讨论】:
尝试将宽度加倍无穷 你能分享你在哪里使用AppDrawerNew
,我想用Row
换行并给Container width
【参考方案1】:
import 'package:flutter/material.dart';
void main()
runApp(AppDrawerNew());
class AppDrawerNew extends StatelessWidget
@override
Widget build(BuildContext context)
return MaterialApp(
home: Scaffold(
body: Container(
width: 50.0,
height: 100.0,
color: Colors.green,
),
),
);
容器必须是 MaterialApp 和 Scaffold 的子容器
【讨论】:
【参考方案2】:试一试?
Container(
constraints: BoxConstraints(minWidth: 50, maxWidth: 50),
color: Colors.green,
)
【讨论】:
【参考方案3】:研究约束概念,更重要!
在文档中是最好的: https://flutter.dev/docs/development/ui/layout/constraints
【讨论】:
以上是关于即使宽度设置为 50,容器也会占用整个宽度的主要内容,如果未能解决你的问题,请参考以下文章
即使我使用了 MediaMediaQuery,容器高度也不完全占用 [关闭]
Android VideoView 中的纵向视频不会占用整个屏幕宽度
如何让 vuetify 数据表在卡片内时跨越容器的整个宽度?