Flutter 給容器剩余高度

Question

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(),
                                      ),
                                    ],
                                  ),
                                ),
                              )
                            ],
                          ),
                  ],
                ),
              )
            ],
    

  ),

您可以在屏幕截圖中看到它顯示的空白區域 我嘗試將我的黃色容器包裹在展開的區域，但它不起作用。 我想我可以按高度進行鞋底，但隨后它會滾動或出現一些相關問題。

Answer 1

 Container(
        height: MediaQuery.of(context).size.height,
        child: SingleChildScrollView(
          child: 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(),
                ],
              ),
            ),
          ),

您可以將列包裝在容器中並使用媒體查詢給出高度。 在溢出時，您也可以使用 SinglechildScrollView。

Answer 2

只需將您的小部件包裝在 SingleChildScrollView 中。 這應該有效。

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