时间戳

首页 > 解决方案 > SingleChildScrollView 使 UI 变白

flutter - SingleChildScrollView 使 UI 变白

问题描述

我正在尝试使我的 UI 可滚动，但是当我添加 SingleChildScrollView 时，我得到这个白屏根本没有显示任何内容。我应该从一开始就删除列？使用容器？我已经在互联网上搜索，但我不知道是什么添加。这是我的代码，请告诉我我可以删除或添加什么以使其工作..

class _UserProfilesState extends State<UserProfiles> {

  @override
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: SingleChildScrollView(
        child: Column(
          children: <Widget>[
            Expanded(
                child: Stack(
              children: <Widget>[
                Padding(
                    padding:
                        EdgeInsets.symmetric(horizontal: 10.0, vertical: 40.0),
                    child: Row(
                        mainAxisAlignment: MainAxisAlignment.spaceBetween,
                        children: <Widget>[
                          IconButton(
                            icon: Icon(Icons.arrow_back),
                            iconSize: 30.0,
                            color: Colors.black,
                            onPressed: () => Navigator.pop(context),
                          ),
                        ])),
                Positioned(
                  left: 24,
                  top: MediaQuery.of(context).size.height / 6.5 - 28,
                  child: Container(
                    height: 84,
                    width: 84,

                    //profilepic
                    child: CircleAvatar(
                      radius: 10,
                      backgroundImage: NetworkImage(widget.avatarUrl != null
                          ? widget.avatarUrl
                          : "https://icon-library.com/images/add-image-icon/add-image-icon-14.jpg"),
                    ),
                  ),
                ),
                Positioned(
                  right: 24,
                  top: MediaQuery.of(context).size.height / 6.5 + 16,
                  child: Row(
                    children: <Widget>[
                      Container(
                        height: 32,
                        width: 100,
                        child: RaisedButton(
                            onPressed: () {
                              Navigator.of(context).push(MaterialPageRoute(
                                  builder: (context) => ChatScreen(
                                        serviceProviderId:
                                            widget.serviceProviderId,
                                        userName: widget.userName,
                                        avatarUrl: widget.avatarUrl,
                                      )));
                            },
                            color: Colors.black,
                            textColor: Colors.white,
                            child: Text(
                              "Message",
                              style: TextStyle(fontWeight: FontWeight.bold),
                            )),
                      ),
                      SizedBox(
                        width: 16,
                      ),
                      Container(
                        height: 32,
                        width: 32,
                        decoration: BoxDecoration(
                            image: DecorationImage(
                                image: NetworkImage(
                                    "https://lh3.googleusercontent.com/Kf8WTct65hFJxBUDm5E-EpYsiDoLQiGGbnuyP6HBNax43YShXti9THPon1YKB6zPYpA"),
                                fit: BoxFit.cover),
                            shape: BoxShape.circle,
                            color: Colors.blue),
                      ),
                    ],
                  ),
                ),
                Positioned(
                    left: 24,
                    top: MediaQuery.of(context).size.height / 4.3,
                    bottom: 0,
                    right: 0,
                    child: Container(
                      child: Column(
                        crossAxisAlignment: CrossAxisAlignment.start,
                        children: <Widget>[
                          Text(widget.userName,
                              style: TextStyle(
                                color: Colors.black,
                                fontWeight: FontWeight.bold,
                                fontSize: 22,
                              )),
                          SizedBox(
                            height: 4,
                          ),
                          Padding(
                              padding: const EdgeInsets.all(1.0),
                              child: Text(
                                widget.address == "default"
                                    ? "No Address yet"
                                    : "${widget.address}",
                                style: TextStyle(
                                  color: Colors.black,
                                  fontSize: 12,
                                ),
                              )),
                          Padding(
                              padding: const EdgeInsets.all(1.0),
                              child: Text(
                                "${widget.categoryName}",
                                style: TextStyle(
                                  color: Colors.black,
                                  fontSize: 12,
                                ),
                              )),
                        ],
                      ),
                    ))
              ],
            ))
          ],
        ),
      ),
    );
  }
}

标签： flutterscroll

解决方案

你的 UI 变成白色的原因是它SingleChildScrollView允许它尽可能多地占用空间。在你的Column，你的一个孩子是Expanded，Expanded尽量占据尽可能多的空间。因此，您正在使您的 UI 占用无限量的空间。这就是您看到白屏的原因。这里的解决方案是删除Expanded.

推荐阅读