当前位置: 首页 > 知识库问答 >
问题:

脚手架背景图像

洪伟彦
2023-03-14

我想把图像设置为脚手架的背景色。当设置一个AppBar和bottom bar时,使用容器的装饰作为脚手架的主体并不能覆盖整个屏幕。

我想为全屏显示背景。下面是我的脚手架代码:

Scaffold(
      backgroundColor: Image.asset('images/background.png').color,
      body: Container(
        decoration: defaultAppBoxDecoration(),
      ),
      appBar: AppBar(
        elevation: 0.0,
        backgroundColor: Colors.transparent,
        title: Text('Title here', style: TextStyle(color: Colors.teal),),
        leading: IconButton(
          icon: Image.asset('images/star.png'),
          onPressed: () {},
        ),
        actions: <Widget>[
          IconButton(icon: Image.asset('images/star.png')),
                  //  IconButton(icon: Image.asset('images/grid.png')),

        ],
      ),
      floatingActionButtonLocation: FloatingActionButtonLocation.centerDocked,
      floatingActionButton: FloatingActionButton(
        child:           IconButton(icon: Image.asset('images/star.png')),
      ),
      bottomNavigationBar: Container(
        padding: EdgeInsets.only(left: 4.0, right: 4.0),
        height: 44.0 + MediaQuery.of(context).padding.bottom,
        child: Row(
          mainAxisAlignment: MainAxisAlignment.spaceBetween,
          children: <Widget>[
                      IconButton(icon: Image.asset('images/star.png')),
          IconButton(icon: Image.asset('images/star.png')),

          ],
        ),
      ),
    );

共有1个答案

赫连俊悟
2023-03-14

尝试使用堆栈检查以下示例:

  @override
    Widget build(BuildContext context) {
      return Stack(
        children: <Widget>[
          Image.asset(
            "resources/background.png",
            height: MediaQuery.of(context).size.height,
            width: MediaQuery.of(context).size.width,
            fit: BoxFit.cover,
          ),
          Scaffold(
              backgroundColor: Colors.transparent,
              appBar: AppBar(
                backgroundColor: Colors.transparent,
                elevation: 0.0,
              ),
              bottomNavigationBar: Container(
                padding: EdgeInsets.only(left: 4.0, right: 4.0),
                height: 44.0 + MediaQuery.of(context).padding.bottom,
                child: Row(
                  mainAxisAlignment: MainAxisAlignment.spaceBetween,
                  children: <Widget>[
                    IconButton(icon: Icon(Icons.star)),
                    IconButton(icon: Icon(Icons.star)),
                  ],
                ),
              ),
              body: Text("Hello world"))
        ],
      );
    }
 类似资料:
  • 我试图设置一个屏幕的背景图像,占屏幕的25%左右,位于顶部。我试过了,

  • 前言 相信很多人都用过vue-cli或create-react-app或者类似的脚手架。 脚手架方便我们复制,粘贴,或者clone代码库,而且还可以更具用户的选择,引入用户所需要的插件。 脚手架往往搭配着早已设计好了架构的项目,然后按需进行拷贝。 Yeoman 介绍 官网介绍: The web's scaffolding tool for modern webapps. yeoman是一款来做脚手

  • 脚手架工具 脚手架是指为整个应用生成一个初始化的模板, 而不是生成访问数据库的代码. Yeoman Slush

  • 我希望有一个解决方案,以设置屏幕背景图像使用堆栈概念,喜欢可能有任何内置的解决方案来设置它。

  • 问题内容: 我为设置背景图片有一个小问题。 这是我在网站上获得的html: 这是CSS: 我不知道为什么按钮的背景仍然是白色。 问题答案: 令人惊讶的是,这里没有答案解决或提及实际问题。 该CSS选择器说:“给我一个元素与ID 里面 一个元素”,就像这样: 但是,您想要的是 带有* id 的元素。而选择器将是(请注意 button 和 #rock 之间缺少的空间)。 * 正如@Greg已经提到的:

  • 除了背景颜色,也可以使用背景图像来实现各种复杂、有趣的背景效果。CSS中,使用 background-image属性来定义背景图像的路径,取值为 none | url,默认值为 none。 url 可以是相对路径,也可以是绝对路径。使用相对路径时,url 是相对于 css 所在的文件,而不是要设置样式的HTML文件。如,下面代码表示,使用 css 文件所在目录下的 img 文件夹下的图像 bg.g