首页 > 解决方案 > 颤振给容器剩余高度

问题描述

Flutter 我有一列我在其中显示小部件。但是有一个问题是容器没有全屏显示,还有一些白色黑色空间。

我的代码

Column(
            crossAxisAlignment: CrossAxisAlignment.start,
            children: [
              //Header Image
              Container(
                width: double.infinity,
                height: 300,
                decoration: BoxDecoration(
                  image: DecorationImage(
                    image: NetworkImage(podcastInfo.artworkUrl600),
                    fit: BoxFit.fill,
                  ),
                ),
                child: Container(
                  margin: EdgeInsets.only(left: 10, top: 15),
                  child: Row(
                    crossAxisAlignment: CrossAxisAlignment.start,
                    children: [
                      CustomAppBar(),
                      Spacer(),
                    ],
                  ),
                ),
              ),

              Container(
                child: Column(
                  crossAxisAlignment: CrossAxisAlignment.start,
                  children: [
                    Padding(
                      padding: const EdgeInsets.all(8.0),
                      child: mainHeading(podcastInfo.trackName ?? ""),
                    ),
                    //Group
                    Padding(
                      padding: const EdgeInsets.all(10.0),
                      child: Text(
                        // "Overhaul Media Group",
                        podcastInfo.artistName,
                        style: TextStyle(
                          fontSize: 14,
                          color: Color(0xFF969696),
                          fontFamily: "Product Sans",
                        ),
                      ),
                    ),

                    model.loading
                        ? Container(
                            height: 150,
                            child: Center(
                              child: SpinKitWave(
                                  color: Color(0xffe7ad29),
                                  type: SpinKitWaveType.center),
                            ),
                          )
                        : Column(
                            crossAxisAlignment: CrossAxisAlignment.start,
                            children: [
                              //Subscribe button
                              Padding(
                                padding: const EdgeInsets.all(8.0),
                                child: Row(
                                  mainAxisAlignment:
                                      MainAxisAlignment.spaceBetween,
                                  children: [
                                    RaisedButton(
                                      color: Colors.black,
                                      shape: RoundedRectangleBorder(
                                        borderRadius: BorderRadius.circular(10),
                                        side: BorderSide(
                                            color: Color(0xffe7ad29)),
                                      ),
                                      onPressed: model.isSubscribed
                                          ? () {
                                              model.unsubPodcast();
                                            }
                                          : () {
                                              model.subscribePodcast();
                                            },
                                      child: Text(
                                        model.isSubscribed
                                            ? "UNSUBSCRIBE"
                                            : "SUBSCRIBE",
                                        style: TextStyle(
                                          color: Colors.white,
                                        ),
                                      ),
                                    ),

                                    ///
                                    ///Share Button
                                    RaisedButton(
                                      color: Colors.black,
                                      shape: RoundedRectangleBorder(
                                        borderRadius: BorderRadius.circular(10),
                                        side: BorderSide(
                                            color: Color(0xffe7ad29)),
                                      ),
                                      onPressed: () {
                                        model.sharePodcast();
                                      },
                                      child: Text(
                                        "SHARE",
                                        style: TextStyle(
                                          color: Colors.white,
                                        ),
                                      ),
                                    ),
                                  ],
                                ),
                              ),

                              //Body text
                              Padding(
                                padding: const EdgeInsets.only(
                                    left: 8, right: 8, bottom: 8),
                                child: Container(
                                  child: Text(
                                    // "Podcast Overhaul was created to provide you with helpful hints, tips, & strategies you need to help you get the most out of your podcast every episode...ALL in 10 minutes or less.",
                                    model.podcast.description ?? "",
                                    style: TextStyle(
                                      color: Color(0xFFB0ABAB),
                                      fontSize: 15,
                                      fontFamily: "Sogoe UI",
                                    ),
                                  ),
                                ),
                              ),

                              ///Season
                              Container(
                                decoration: BoxDecoration(
                                  color: Color(0xffe7ad29),
                                  borderRadius: BorderRadius.only(
                                      topRight: Radius.circular(20),
                                      topLeft: Radius.circular(20)),
                                ),
                                child: Padding(
                                  padding: const EdgeInsets.all(10.0),
                                  child: Column(
                                    children: [
                                      SizedBox(
                                        height:
                                            MediaQuery.of(context).size.height *
                                                0.02,
                                      ),
                                      Container(
                                        width:
                                            MediaQuery.of(context).size.width,
                                        padding: EdgeInsets.only(bottom: 6),
                                        decoration: BoxDecoration(
                                          border: Border(
                                            bottom: BorderSide(
                                              color: Color(0xFF707070),
                                            ),
                                          ),
                                        ),
                                        child: mainHeading("EPISODES"),
                                      ),
                                      Column(
                                        children: model.podcast.episodes
                                            .map<Widget>(
                                              (e) => Container(
                                                width: MediaQuery.of(context)
                                                    .size
                                                    .width,
                                                padding: EdgeInsets.only(
                                                    bottom: 6, top: 10),
                                                decoration: BoxDecoration(
                                                  border: Border(
                                                    bottom: BorderSide(
                                                      color: Color(0xFF707070),
                                                    ),
                                                  ),
                                                ),
                                                child: GestureDetector(
                                                  onTap: () {
                                                    print('test');
                                                    print(podcastInfo);
                                                    print('debug');
                                                    print(e);
                                                    Navigator.pushNamed(
                                                      context,
                                                      'player',
                                                      arguments: new PlayerInfo(
                                                        item: podcastInfo,
                                                        episode: e,
                                                      ),
                                                    );
                                                  },
                                                  child: mainHeading(e.title),
                                                ),
                                              ),
                                            )
                                            .toList(),
                                      ),
                                    ],
                                  ),
                                ),
                              )
                            ],
                          ),
                  ],
                ),
              )
            ],
    

  ),

在此处输入图像描述

您可以在屏幕截图中看到它显示的白色空白空间我尝试将我的黄色容器包装在展开中,但它不起作用。我想我可以按高度鞋底,但它会滚动或出现一些相关问题。

标签: flutterdart

解决方案


只需将您的小部件包装在 SingleChildScrollView 中。这应该有效。

SingleChildScrollView(
            child: Container(
              color:Colors.white,
              child:Column(),
            ),
          ),

推荐阅读