即使宽度设置为 50,容器也会占用整个宽度

Posted

技术标签:

【中文标题】即使宽度设置为 50,容器也会占用整个宽度【英文标题】:Container takes entire width even though the width is set to 50 【发布时间】:2021-09-26 08:41:13 【问题描述】:

我观察到一种非常奇怪的行为。我已将Containerwidth 设置为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,容器高度也不完全占用 [关闭]

在 Bootstrap 中嵌入视频占用了整个屏幕的宽度?

Android VideoView 中的纵向视频不会占用整个屏幕宽度

如何让 vuetify 数据表在卡片内时跨越容器的整个宽度?

容器的宽度/div的宽度即使换成不同的屏幕分辨率也不会占据页面的整个宽度

指定表格视图的分隔线宽度[重复]