flutter中appBar和body之間的空格怎么去掉？

Question

在我的應用程序中，flutter 應用程序在應用程序欄和屏幕主體之間添加了空間。 以下是屏幕圖像：

以下是代碼：

Widget build(BuildContext context) {
    // TODO: implement build
    return Scaffold(
      appBar: AppBar(
        automaticallyImplyLeading: true,
        title: Container(
            height: MediaQuery.of(context).size.width * 0.13,
            child: Text('Dashboard')),
        centerTitle: true,
        backgroundColor: kBluePrimaryColor,
        elevation: 0,
      ),
      body: SingleChildScrollView(
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: [
            Container(
              height: MediaQuery.of(context).size.height * 0.33,
              child: Stack(children: [
                Container(
                  //color: kBluePrimaryColor,
                  width: MediaQuery.of(context).size.width,
                  height: MediaQuery.of(context).size.height * 0.23,
                  child: bannerimage == '' || bannerimage == null
                      ? Image.asset('images/user.jpg')
                      : Image.network(
                          bannerimage),
                ),
                Positioned(
                  top: MediaQuery.of(context).size.height * 0.16,
                  left: MediaQuery.of(context).size.width * 0.03,
                  child: Row(
                    children: [
                      Container(
                        width: MediaQuery.of(context).size.height * 0.14,
                        height: MediaQuery.of(context).size.height * 0.14,
                        decoration: ShapeDecoration(
                            shape: CircleBorder(), color: Colors.white),
                        child: Padding(
                          padding: EdgeInsets.all(8.0),
                          child: DecoratedBox(
                            decoration: ShapeDecoration(
                                shape: CircleBorder(),
                                image: DecorationImage(
                                  fit: BoxFit.cover,
                                  image: imageurl == '' || imageurl == null
                                      ? AssetImage('images/user.jpg')
                                      : NetworkImage(imageurl),
                                )),
                          ),
                        ),
                      ),
                      SizedBox(
                        width: MediaQuery.of(context).size.width * 0.05,
                      ),
                    ],
                  ),
                ),
                Positioned(
                  top: MediaQuery.of(context).size.height * 0.24,
                  left: MediaQuery.of(context).size.height * 0.165,
                  child: Container(
                      child: Row(
                    mainAxisAlignment: MainAxisAlignment.center,
                    children: [
                      RaisedButton(
                          shape: RoundedRectangleBorder(
                            borderRadius: BorderRadius.circular(30.0),
                          ),
                          color: kOrangePrimaryColor,
                          onPressed: () {
                            print('Contacts');
                          },
                          child: RichText(
                            text: TextSpan(
                              text: 'Total: ',
                              style:
                                  TextStyle(color: Colors.white, fontSize: 12),
                              children: <TextSpan>[
                                TextSpan(
                                    text: '30',
                                    style: TextStyle(
                                        color: Colors.white,
                                        fontSize: 12,
                                        fontWeight: FontWeight.bold,
                                        fontFamily: 'Calibri')),
                              ],
                            ),
                          )),
                      SizedBox(
                        width: 13,
                      ),
                      RaisedButton(
                          shape: RoundedRectangleBorder(
                            borderRadius: BorderRadius.circular(30.0),
                          ),
                          color: kBluePrimaryColor,
                          onPressed: () {
                            print('Address');
                          },
                          child: RichText(
                            text: TextSpan(
                                text: 'ADDRESS',
                                style: TextStyle(
                                    color: Colors.white,
                                    fontSize: 10,
                                    fontWeight: FontWeight.bold,
                                    fontFamily: 'Calibri')),
                          ))
                    ],
                  )),
                ),
              ]),
            ),
          ],
        ),
      ),
    );
  }

我嘗試了給出的各種答案，但沒有用。

我想刪除藍色應用欄和圖像之間的空白區域。 有人可以幫我嗎？

Answer 1

我認為這是因為橫幅圖像沒有填滿容器 嘗試將fit: BoxFit.cover添加到圖像中

Answer 2

您只需要用Container包裹 Column（在 SingleChildScrollView 中）並給出它的高度和寬度。

body: SingleChildScrollView(
   child: Container(
      height: MediaQuery.of(context).size.height,
      width: MediaQuery.of(context).size.width,
      child: Column(
         ...
      )   
   )
)

Answer 3

在我的應用程序中，flutter 應用程序在 appbar 和屏幕主體之間添加空間。 以下是屏幕圖像：

以下是代碼：

Widget build(BuildContext context) {
    // TODO: implement build
    return Scaffold(
      appBar: AppBar(
        automaticallyImplyLeading: true,
        title: Container(
            height: MediaQuery.of(context).size.width * 0.13,
            child: Text('Dashboard')),
        centerTitle: true,
        backgroundColor: kBluePrimaryColor,
        elevation: 0,
      ),
      body: SingleChildScrollView(
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: [
            Container(
              height: MediaQuery.of(context).size.height * 0.33,
              child: Stack(children: [
                Container(
                  //color: kBluePrimaryColor,
                  width: MediaQuery.of(context).size.width,
                  height: MediaQuery.of(context).size.height * 0.23,
                  child: bannerimage == '' || bannerimage == null
                      ? Image.asset('images/user.jpg')
                      : Image.network(
                          bannerimage),
                ),
                Positioned(
                  top: MediaQuery.of(context).size.height * 0.16,
                  left: MediaQuery.of(context).size.width * 0.03,
                  child: Row(
                    children: [
                      Container(
                        width: MediaQuery.of(context).size.height * 0.14,
                        height: MediaQuery.of(context).size.height * 0.14,
                        decoration: ShapeDecoration(
                            shape: CircleBorder(), color: Colors.white),
                        child: Padding(
                          padding: EdgeInsets.all(8.0),
                          child: DecoratedBox(
                            decoration: ShapeDecoration(
                                shape: CircleBorder(),
                                image: DecorationImage(
                                  fit: BoxFit.cover,
                                  image: imageurl == '' || imageurl == null
                                      ? AssetImage('images/user.jpg')
                                      : NetworkImage(imageurl),
                                )),
                          ),
                        ),
                      ),
                      SizedBox(
                        width: MediaQuery.of(context).size.width * 0.05,
                      ),
                    ],
                  ),
                ),
                Positioned(
                  top: MediaQuery.of(context).size.height * 0.24,
                  left: MediaQuery.of(context).size.height * 0.165,
                  child: Container(
                      child: Row(
                    mainAxisAlignment: MainAxisAlignment.center,
                    children: [
                      RaisedButton(
                          shape: RoundedRectangleBorder(
                            borderRadius: BorderRadius.circular(30.0),
                          ),
                          color: kOrangePrimaryColor,
                          onPressed: () {
                            print('Contacts');
                          },
                          child: RichText(
                            text: TextSpan(
                              text: 'Total: ',
                              style:
                                  TextStyle(color: Colors.white, fontSize: 12),
                              children: <TextSpan>[
                                TextSpan(
                                    text: '30',
                                    style: TextStyle(
                                        color: Colors.white,
                                        fontSize: 12,
                                        fontWeight: FontWeight.bold,
                                        fontFamily: 'Calibri')),
                              ],
                            ),
                          )),
                      SizedBox(
                        width: 13,
                      ),
                      RaisedButton(
                          shape: RoundedRectangleBorder(
                            borderRadius: BorderRadius.circular(30.0),
                          ),
                          color: kBluePrimaryColor,
                          onPressed: () {
                            print('Address');
                          },
                          child: RichText(
                            text: TextSpan(
                                text: 'ADDRESS',
                                style: TextStyle(
                                    color: Colors.white,
                                    fontSize: 10,
                                    fontWeight: FontWeight.bold,
                                    fontFamily: 'Calibri')),
                          ))
                    ],
                  )),
                ),
              ]),
            ),
          ],
        ),
      ),
    );
  }

我嘗試了給出的各種答案，但沒有奏效。

我想刪除藍色應用欄和圖像之間的空白。 有人可以幫我嗎？

Answer 4

向 appbar 添加工具欄高度，向 body 添加滾動視圖：

Scaffold(
      appBar:   AppBar(
              toolbarHeight: 40,
             .....
              ),
      body:
      SingleChildScrollView(...

Answer 5

我知道我來晚了，但如果將來有人需要這個，這就是解決方案。

在 Scaffold 小部件中，將屬性“extendBodyBehindAppBar”設置為“true”...