76

我在我的颤振应用程序中添加了AppBar 。我的屏幕已经有一个背景图像，我不想在其中设置 appBar 颜色或不想为 appBar 设置单独的背景图像。

我也想向 appBar 显示相同的屏幕背景图像。

我已经尝试将 appBar 颜色设置为透明，但它显示的颜色像灰色。

示例代码：

appBar: new AppBar(
        centerTitle: true,
//        backgroundColor: Color(0xFF0077ED),
        elevation: 0.0,
        title: new Text(
            "DASHBOARD",
            style: const TextStyle(
                color:  const Color(0xffffffff),
                fontWeight: FontWeight.w500,
                fontFamily: "Roboto",
                fontStyle:  FontStyle.normal,
                fontSize: 19.0
            )),
      )

在此处输入图像描述

4

11 回答 11

201

Scaffold 现在支持此功能（稳定版 - v1.12.13+hotfix.5）。

  • 设置脚手架extendBodyBehindAppBar为真，
  • 将 AppBar 设置elevation为 0 以摆脱阴影，
  • 根据需要设置 AppBarbackgroundColor透明度。
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      extendBodyBehindAppBar: true,
      backgroundColor: Colors.red,
      appBar: AppBar(
//        backgroundColor: Colors.transparent,
        backgroundColor: Color(0x44000000),
        elevation: 0,
        title: Text("Title"),
      ),
      body: Center(child: Text("Content")),
    );
  }
于 2019-12-30T17:13:22.817 回答
70

您可以使用 Stack 小部件来执行此操作。按照下面的例子。

import 'package:flutter/material.dart';

void main() => runApp(new MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return new MaterialApp(
      home: new Home(),
    );
  }
}

class Home extends StatefulWidget {
  @override
  _HomeState createState() => _HomeState();
}

class _HomeState extends State<Home> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Stack(
        children: <Widget>[
          Scaffold(
            backgroundColor: Colors.transparent,
            appBar: new AppBar(
              title: new Text(
                "Hello World",
                style: TextStyle(color: Colors.amber),
              ),
              backgroundColor: Colors.transparent,
              elevation: 0.0,
            ),
            body: new Container(
              color: Colors.red,
            ),
          ),
        ],
      ),
    );
  }
}
于 2018-10-31T10:22:34.607 回答
57

您可以使用 Scaffold 的属性“ extendBodyBehindAppBar : true ”不要忘记用 SafeArea 包裹孩子

  @Override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(
          widget.title,
          style: TextStyle(color: Colors.black),
        ),
        backgroundColor: Colors.transparent,
        elevation: 0.0,
      ),
      extendBodyBehindAppBar: true,
      body: Container(
        width: double.infinity,
        height: double.infinity,
        decoration: BoxDecoration(
          image: DecorationImage(
            image: AssetImage('assets/background/home.png'),
            fit: BoxFit.cover,
          ),
        ),
        child: SafeArea(
            child: Center(
          child: Container(
            width: 300,
            height: 300,
            decoration: BoxDecoration(
              color: Colors.green,
            ),
            child: Center(child: Text('Test')),
          ),
        )),
      ),
    );
  }

在此处输入图像描述

于 2020-01-24T12:33:50.170 回答
14

这些似乎都不适合我，我的是这样的：

return Scaffold(
  extendBodyBehindAppBar: true,
  appBar: AppBar(
    backgroundColor: Colors.transparent,
    iconTheme: IconThemeData(color: Colors.white),
    elevation: 0.0,
  ),
  body: Stack(
    children: <Widget>[
      Container(
        decoration: BoxDecoration(
          image: DecorationImage(
            image: NetworkImage(
                'https://images.unsplash.com/photo-1517030330234-94c4fb948ebc?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1275&q=80'),
            fit: BoxFit.cover,
          ),
        ),
        child: Padding(
          padding: const EdgeInsets.fromLTRB(0, 100, 0, 0),
          child:
          // Column of widgets here...
        ),
       ),
     ],
   ),
 );
于 2020-08-30T18:44:10.320 回答
10

输出：

在此处输入图像描述

很多答案，但没有人解释为什么extendBodyBehindAppBar有效？它之所以有效，是因为当我们指定extendBodyBehindAppBar为 true 时，小部件的主体的高度为AppBar，我们会看到一个覆盖该AppBar区域的图像。

简单示例：

Size size = MediaQuery.of(context).size;
    return Scaffold(
      extendBodyBehindAppBar: true,
      body: Container(
        // height: size.height * 0.3,
        child: Image.asset(
          'shopping_assets/images/Fruits/pineapple.png',
          fit: BoxFit.cover,
          height: size.height * 0.4,
          width: size.width,
        ),
      ),
    );
于 2020-11-30T10:10:42.450 回答
5

这就是我所做的，它正在工作

Scaffold 现在支持此功能（稳定版 - v1.12.13+hotfix.5）。

将 Scaffold extendBodyBehindAppBar 设置为 true，将 AppBar 高度设置为 0 以消除阴影，根据需要设置 AppBar backgroundColor 透明度。

最好的祝福

于 2020-03-31T07:51:02.157 回答
3 
Scaffold(extendBodyBehindAppBar: true);
于 2021-06-18T17:34:24.373 回答
0

就我而言，我这样做如下：

额外创建一个带有自定义后退按钮的应用栏（在本例中为FloatingActionButton）。您仍然可以在Stack.

class Home extends StatefulWidget {
  @override
  _EditProfilePageState createState() => _EditProfilePageState();
}

class _HomeState extends State< Home > {

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Stack(
        children: <Widget>[
          this._backgroundImage(), // --> Background Image
          Positioned( // --> App Bar
            child: AppBar(
              backgroundColor: Colors.transparent,
              elevation: 0.0,
              leading: Padding( // --> Custom Back Button
                padding: const EdgeInsets.all(8.0),
                child: FloatingActionButton(
                  backgroundColor: Colors.white,
                  mini: true,
                  onPressed: this._onBackPressed,
                  child: Icon(Icons.arrow_back, color: Colors.black),
                ),
              ),
            ),
          ),
          // ------ Other Widgets ------
        ],
      ),
    );
  }

  Widget _backgroundImage() {
    return Container(
      height: 272.0,
      width: MediaQuery.of(context).size.width,
      child: FadeInImage(
        fit: BoxFit.cover,
        image: NetworkImage(
            'https://images.unsplash.com/photo-1527555197883-98e27ca0c1ea?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&w=1000&q=80'),
        placeholder: AssetImage('assetName'),
      ),
    );
  }

  void _onBackPressed() {
    Navigator.of(context).pop();
  }
}

在以下链接中，您可以找到更多信息链接

于 2019-10-15T12:18:36.210 回答
0

你可以试试这个代码对我有用

@override
  Widget build(BuildContext context) {
    _buildContext = context;
    sw = MediaQuery.of(context).size.width;
    sh = MediaQuery.of(context).size.height;

    return new Container(
      child: new Stack(
        children: <Widget>[
          new Container(
            child: Stack(
              children: <Widget>[
                Container(
                  padding: EdgeInsets.all(20.0),
                  decoration: BoxDecoration(image: backgroundImage),
                ),
              ],
            ),
          ),
          new Scaffold(
            backgroundColor: Colors.transparent,
            appBar: new AppBar(
              title: new Text(Strings.page_register),
              backgroundColor: Colors.transparent,
              elevation: 0.0,
              centerTitle: true,
            ),
            body: SingleChildScrollView(
              padding: EdgeInsets.all(20.0),
              physics: BouncingScrollPhysics(),
              scrollDirection: Axis.vertical,
              child: new Form(
                key: _formKey,
                autovalidate: _autoValidate,
                child: FormUI(),
              ),
            ),
          )
        ],
      ),
    );
  }

背景图片

DecorationImage backgroundImage = new DecorationImage(
  image: new ExactAssetImage('assets/images/welcome_background.png'),
  fit: BoxFit.cover,
);
于 2019-12-17T09:32:54.417 回答
0

使用堆栈

  • 设置背景图片
    • 另一个脚手架（）
      • 设置背景颜色透明
      • 设置自定义应用栏
      • 使用带有 singleChildScrollView 或 ListView 的列

在此处输入图像描述

@override   Widget build(BuildContext context) {
        return Scaffold(
          body: Stack(
            children: <Widget>[
              backgroundBGContainer(),
              Scaffold(
                backgroundColor: Colors.transparent,
                appBar: appBarWidgetCustomTitle(context: context, titleParam: ""),
                body: SingleChildScrollView(
                  child: Column(
                    children: <Widget>[
                      _spaceWdgt(),
                      Center(
                        child: Stack(
                          children: <Widget>[
                            new Image.asset(
                              "assets/images/user_icon.png",
                              width: 117,
                              height: 97,
                            ),
                          ],
                        ),
                      ),




  Widget backgroundBGContainer() {
      return Container(
        decoration: new BoxDecoration(
            image: new DecorationImage(
              image: new AssetImage("assets/images/ground_bg_image.png"),
              fit: BoxFit.cover,
            ),
            color: MyColor().groundBackColor),
      );
    }
于 2020-07-03T07:50:49.610 回答
0

可能有很多情况，例如，您是否要保留AppBar状态栏，是否要使状态栏可见，为此，您可以换Scaffold.body行SafeArea，如果您不想AppBar有任何阴影（不像红色我在示例 2) 中提供，您可以将其颜色设置为Colors.transparent：

  • 全图（不带AppBar）

    在此处输入图像描述

    Scaffold(
  extendBodyBehindAppBar: true,
  body: SizedBox.expand(
    child: Image.network(
      'https://wallpaperaccess.com/full/3770388.jpg',
      fit: BoxFit.cover,
    ),
  ),
)

  • 完整图像（带有AppBar）

    在此处输入图像描述

    Scaffold(
  extendBodyBehindAppBar: true,
  appBar: AppBar(
    backgroundColor: Colors.transparent,
    shadowColor: Colors.red,
    title: Text('MyApp'),
  ),
  body: SizedBox.expand(
    child: Image.network(
      'https://wallpaperaccess.com/full/3770388.jpg',
      fit: BoxFit.cover,
    ),
  ),
)
于 2022-01-04T20:56:15.947 回答