enter image description here

假设所有屏幕都需要与上图相同大小的水平填充,所以我制作了一个每个屏幕都使用的基本布局小部件.

class BaseLayout extends StatelessWidget {
  final Widget child;

  const BaseLayout({super.key, required this.child});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Padding(
          padding: const EdgeInsets.symmetric(horizontal: 15),
          child: SafeArea(child: child)),
    );
  }
}
class HomeScreen extends StatelessWidget {
  const HomeScreen({super.key});

  @override
  Widget build(BuildContext context) {
    return BaseLayout(
      child: Column(
        children: [                    
          Container( // how to make only this one take whole width of the screen unlike others?            
            decoration: const BoxDecoration(color: Color(0xffFFFF7E)),
          ),
          // the below Rows need to take the padding and it does due to the BaseLayout
          Row(),
          Row()
        ],
      ),
    );
  }
}


然而,像黄框这样的小部件必须占据屏幕的整个宽度尺寸(不需要填充).

有可能吗?或者我不应该使用布局并将其交给需要的人.

提前感谢.

推荐答案

不,这是一个例外.

That page doesn't share the common visual characteristics like padding with other pages.

因此,它应该具有与其他页面不同的设计(可重用性无法应用于此处).

But if it's insistent need,只需一个标志变量即可处理.

查看以下小部件:

class MyWidget extends StatelessWidget {
  final Widget child;
  final bool hasYellow;

   MyWidget({super.key,required this.child, this.hasYellow = false});

  @override
  Widget build(BuildContext context) {

    return (hasYellow)?Scaffold(
      body: // Design that Exceptional page
      Column(
        children: [
          Container(
            width: double.infinity,
            height: 200, // what u want
            color: Colors.yellow,
          ),
          Padding(
           padding: EdgeInsets.all(25),
           child: child,
            )
        ],
      )
    ):Scaffold(//Design that reusable page
      body: Padding(
        padding: EdgeInsets.all(25),
        child: child, // all page is padded
      )
    );
  }
}

这就是您在每种情况下的呼叫方式:

return MyWidget(child: Text('HI, Has Yellow'), hasYellow: true,);

return MyWidget(child: Text('HI,Has No Yellow'),);

希望有帮助.

Flutter相关问答推荐

Flutter -如何从布局填充(对称水平)中排除小部件?

为什么他们实例化类,然后丢弃该实例?

将目标平台设置为Flutter 构建

在fltter_widget_from_html中启动url

Flutter 蜂窝单元测试

flutter -当使用SingleChildScrollView包装我的列小部件时,它不会填充整个高度

Ffltter:发布版本中的Path NotFoundException

在flutter web上渲染多个Youtube视频

上传的图像不能在FireBase中预览.S档案类型为空白,摆动

如果其他Provider 的帐户已存在,如何阻止用户登录?

Flutter:如何从运行时创建的列表中访问单个子部件的值

如何显示从 MariaDB 获取的数据到列表视图

如何在 Flutter 中将 ScaffoldMessenger 中的 Snackbar 显示为 Widget?

如何在手势检测器中获得涟漪效应

我的主屏幕上的 FutureBuilder 不断重新加载(但仅在其他屏幕上时)?

type '_InternalLinkedHashMap' 不是使用 http 包的'String' 类型的子类型

http响应在Flutter 中返回307

Flutter 将方法应用于静态变量

使用 hydrad_bloc 的预览包

Textfield 和 MasonryGrid 给出错误(垂直视口的高度没有限制)