Flutter - 使用 Column/Expanded/ListView 的布局問題

Question

我是 Flutter 的新手，我似乎無法解決這個問題。

我想顯示我的自定義卡片式 Ink 容器的 ListView 並且幾乎已經實現了它。 但是，當我向下滾動時，ListView 會延伸到我的文本小部件（列中的前一項）后面：

文本小部件后面的擴展小部件

滾動時查看“畫廊”文本后面：動畫 GIF 顯示不良行為

我希望我的 ListView 小部件滾動時沒有容器顯示在“畫廊”文本后面。

我試過沒有擴展小部件（ListView.builder() 直接在 Column 子項下），但我在調試控制台中收到此錯誤消息：

════════渲染庫捕獲異常═══════════════════════════════RenderBox was not layed═ out: RenderRepaintBoundary#8dc77 relayoutBoundary=up8 NEEDS-PAINT 'package:flutter/src/rendering/box.dart': Failed assertion: line 1702 pos 12: 'hasSize' 導致錯誤的相關小部件是 Column

並且列表根本不顯示。

這是我的代碼：

class Gallery extends StatelessWidget {

  final List<_ChallengeCard> challengestest = [
    _ChallengeCard(title: 'Challenge #1', subtitle: 'Completed on 13/11/1978'),
    _ChallengeCard(title: 'Challenge #2', subtitle: 'Completed on 12/18/2043'),
    _ChallengeCard(title: 'Challenge #3', subtitle: 'Current challenge'),
    _ChallengeCard(title: 'Challenge #4', subtitle: 'Locked'),
    _ChallengeCard(title: 'Challenge #5', subtitle: 'Locked'),
    _ChallengeCard(title: 'Challenge #6', subtitle: 'Locked'),
    _ChallengeCard(title: 'Challenge #7', subtitle: 'Locked'),
    ];

    Widget build(BuildContext context) {
        return Scaffold(
          body: Column(
              mainAxisAlignment: MainAxisAlignment.start,
              mainAxisSize: MainAxisSize.max,
              children: [
                Text(
                'Gallery',
                style: GoogleFonts.alexBrush(fontSize: 55),
                textAlign: TextAlign.center,
                ),
                Expanded(
                  child: ListView.builder(
                    itemCount: challengestest.length,
                    itemBuilder: (context, index){
                    return Container(
                      padding: EdgeInsets.symmetric(vertical: 8.0),
                      child: InkWell(
                        onTap: (){},
                        child: challengestest[index]
                      ),
                    );
                    },
                  ),
                ),
              ],
            ),
        );
      }
    }

還有一些額外的類，這樣你就可以看到 ListView 項目的具體內容（但我懷疑它們與這個問題有什么關系）：

class _ChallengeCard extends StatelessWidget {
  _ChallengeCard({
    Key key,
    this.title,
    this.subtitle,
  }) : super(key: key);

  final String title;
  final String subtitle;

  @override
  Widget build(BuildContext context) {
    return Ink(
      padding: EdgeInsets.all(11.0),
      decoration: BoxDecoration(
        color: Color(0xFF11001A),
        borderRadius: BorderRadius.all(Radius.circular(10.0))),
      child: Container(
        alignment: Alignment.topLeft,
        child: Row(
        mainAxisAlignment: MainAxisAlignment.start,
        children: [
          Padding(
            padding: const EdgeInsets.symmetric(horizontal: 8.0),
            child: Icon(Icons.star,color: Colors.white, size: 40.0,),
          ),
          Column(
            crossAxisAlignment: CrossAxisAlignment.start,
            children:<Widget>[
              Text(
                '$title',
                style: GoogleFonts.lora(fontSize: 25),
              ),
              Text(
                '$subtitle',
                style: GoogleFonts.lora(fontSize: 15),
              ),
            ],
          ),
        ],
        ),
      ),
    );
  }
}

class“畫廊”是從 main.dart 文件調用的（這就是為什么整個應用程序中有一個底部導航欄的原因），但我沒有包含它，因為它與問題無關。

提前致謝！

Answer 1

您也可以通過將小部件包裝在單個子滾動視圖中來使文本滾動

   ...

   SingleChildScrollView(// add a scrollview
                child: 
              Column(
                  mainAxisAlignment: MainAxisAlignment.start,
                  mainAxisSize: MainAxisSize.max,
                  children: [
                    Text(
                    'Gallery',
                 style: GoogleFonts.alexBrush(fontSize: 55),
                    textAlign: TextAlign.center,
                    ), 
                    //remove the expanded widget
                  ListView.builder(
                    shrinkWrap: true, // make shrikwrap true
                        physics: NeverScrollableScrollPhysics(), // add this physics so it won't scroll
                        itemCount: challengestest.length,
                        itemBuilder: (context, index){
                        return Container(
                        ... // rest of your code here
);}
),
]))

Answer 2

我終於通過使用 AppBar 小部件而不是“畫廊”標題的文本小部件來讓它工作。

Scaffold 不再包含 Column 小部件，僅包含 ListView.Builder：

  Widget build(BuildContext context) {
    return Scaffold(
      body: ListView.builder(
                shrinkWrap: true,
                itemCount: challengestest.length,
                itemBuilder: (context, index){
                  return Container(
                    padding: EdgeInsets.symmetric(vertical: 8.0),
                    child: InkWell(
                      onTap: (){},
                      child: challengestest[index]
                    ),
                  );
                },
              ),
    );
  }

文本“Gallery”已被移動為經過大量修改的 AppBar，帶有 Stack 小部件以保留其外觀：

   Stack(
      children: <Widget>[
        Image.asset(
            "assets/images/bgpurple.jpeg",
            height: MediaQuery.of(context).size.height,
            width: MediaQuery.of(context).size.width,
            fit: BoxFit.cover,
          ),
        Scaffold(
          appBar: PreferredSize(
            preferredSize: Size.fromHeight(85.0),
            child: AppBar(
              automaticallyImplyLeading: false,
              elevation: 0.0,
              backgroundColor: Colors.transparent,
              centerTitle: true,
              flexibleSpace: Padding(
                padding: const EdgeInsets.only(top: 60.0),
                child: Center(
                  child: Text(
                    _myPageTitles[_selectedIndex],
                    style: GoogleFonts.alexBrush(
                      fontSize: 45, 
                      color: Colors.white,
                      )
                    ),
                ),
              ),
            ),
          ),