首页 > 解决方案 > 无法摆脱 Sliver 身体周围的浅灰色边框

问题描述

有谁知道为什么我的身体顶部和底部仍然有一条灰色的细横线?我正在使用SliverAppBarSliverFillRemaining下面。我已经将elevation值设置SliverAppBar0.0

Flutter App 图片

import 'package:flutter/material.dart';
import 'package:curved_navigation_bar/curved_navigation_bar.dart';

class AccountPage extends StatefulWidget {
  @override
  _AccountPageState createState() => _AccountPageState();
}

class _AccountPageState extends State<AccountPage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Theme.of(context).primaryColor,
      bottomNavigationBar: CurvedNavigationBar(
        backgroundColor: Theme.of(context).backgroundColor,
        items: <Widget>[
          Icon(Icons.add, size: 30),
          Icon(Icons.list, size: 30),
          Icon(Icons.compare_arrows, size: 30),
        ],
        onTap: (index) {
          //Handle button tap
        },
      ),
      body: CustomScrollView(
        slivers: [
          SliverAppBar(
            elevation: 0.0,
            backgroundColor: Theme.of(context).primaryColor,
            expandedHeight: 220.0,
            collapsedHeight: 125.0,
            pinned: true,
            flexibleSpace: Stack(
              children: [
                Positioned.fill(
                  child: Image(
                    image: AssetImage('assets/images/Red_Polygon.jpg'),
                    fit: BoxFit.cover,
                  ),
                ),
                SafeArea(
                  child: Column(
                    mainAxisAlignment: MainAxisAlignment.end,
                    children: [
                      Container(
                        width: double.infinity,
                        child: Padding(
                          padding: EdgeInsets.symmetric(
                            horizontal: 32.0,
                            vertical: 16.0,
                          ),
                          child: Column(
                            mainAxisAlignment: MainAxisAlignment.end,
                            crossAxisAlignment: CrossAxisAlignment.start,
                            children: [
                              Text(
                                "Hello, \nFIRST_NAME!",
                                style: TextStyle(
                                  color: Colors.white,
                                  fontSize: 32.0,
                                ),
                              ),
                            ],
                          ),
                        ),
                      ),
                      Container(
                        height: 16.0,
                        width: double.infinity,
                        decoration: BoxDecoration(
                          color: Theme.of(context).backgroundColor,
                          borderRadius: new BorderRadius.only(
                            topLeft: const Radius.circular(40.0),
                            topRight: const Radius.circular(40.0),
                          ),
                        ),
                      ),
                    ],
                  ),
                ),
              ],
            ),
          ),
          SliverFillRemaining(
            child: Container(
              color: Theme.of(context).backgroundColor,
              child: Padding(
                padding: const EdgeInsets.symmetric(horizontal: 8.0),
                child: Column(
                  children: [
                  ],
                ),
              ),
            ),
          ),
        ],
      ),
    );
  }
}

标签: flutterdartmobile

解决方案


使这个容器具有白色的装饰颜色

  Container(
                        height: 16.0,
                        width: double.infinity,
                        decoration: BoxDecoration(
                         color:Colors.white,
                          borderRadius: new BorderRadius.only(
                            topLeft: const Radius.circular(40.0),
                            topRight: const Radius.circular(40.0),
                          ),
                        ),
                      ),

对于底部导航,也给它一个白色的背景颜色。

默认背景颜色为“灰色”,您可以在主题中进行编辑


推荐阅读