在 Flutter 的 Stack() 中只滾動一個 Widget

Question

我是 Flutter 的新手，我正在嘗試構建我的第一個應用程序。 我希望我的主頁在頂部有一個小圖像，其內容在頁面的 rest 上。 滾動時，我希望圖像表現得像視差效果一樣，保持固定，灰色的 ClipPath() 小部件在其上滾動。

我已經嘗試了幾種方法，但我不確定我是否在該頁面上使用了正確的元素，但這是我到目前為止按照我想要的方式成功實現 position 的唯一方法。

但是，即使使用 SingleChildScrollView() 作為 Container/ClipPath() 的父親，我仍然無法滾動頁面。

你能幫我嗎？ 謝謝你們。

// hope.page.dart:

import 'package:flutter/material.dart';
import 'package:remind_md/ui/shared/clippers/content.clipper.dart';

class HomePage extends StatefulWidget {
  @override
  _HomePageState createState() => _HomePageState();
}

class _HomePageState extends State<HomePage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        toolbarHeight: 40,
        actions: <Widget>[
            // action button
            IconButton(
              icon: Icon(Icons.notifications, color: Colors.white),
              onPressed: () {
                
              },
            ),
            // action button
            IconButton(
              icon: Icon(Icons.settings, color: Colors.white),
              onPressed: () {
                
              },
            ),
          ],
      ),
      body: Stack(
        children: <Widget>[
          Container(
            decoration: BoxDecoration(
              gradient: LinearGradient(
                colors: [Color(0xff82d9e8), Color(0xff27acc1)],
                begin: Alignment.bottomLeft,
                end: Alignment.topRight
              )
            ),
            child: OverflowBox(
              alignment: Alignment(-0.75,-1.05),
              maxHeight: MediaQuery.of(context).size.height * 2,
              child: Image.asset(
                'images/home_doctors.png', 
                scale: 1.05,
              ),
            )
          ),  
          Positioned(
            top: MediaQuery.of(context).size.height*0.2 ,
            child: SingleChildScrollView(
              scrollDirection: Axis.vertical,
              child: Container(
                child: ClipPath(
                  clipper: ContentClipper(),
                  child: Container(
                    padding: EdgeInsets.only(top: 40),
                    width: MediaQuery.of(context).size.width,
                    color: Color(0xfff4f4f4),
                    child: Column(
                      children: [
                        Row(
                          mainAxisAlignment: MainAxisAlignment.spaceEvenly,
                          crossAxisAlignment: CrossAxisAlignment.start,
                          mainAxisSize: MainAxisSize.min,
                          children: <Widget>[
                            Container(
                              width: 200,
                              height: 100,
                              child: Card(
                                elevation: 2,
                                shape: RoundedRectangleBorder(borderRadius:  BorderRadius.circular(7)),
                                child: Padding(
                                  padding: const EdgeInsets.all(5.0),
                                  child: Stack(
                                    children: <Widget>[
                                      Positioned(
                                         right: 3,
                                          top: 0,
                                          child: Opacity(
                                          opacity: 0.2,
                                          child: Image.asset('images/card_calendar.png', width: 100, height: 75)
                                        ),
                                      ),
                                      Positioned(
                                        top: 0,
                                        left: 5,
                                        child: Column(
                                          crossAxisAlignment: CrossAxisAlignment.start,
                                          children: [
                                            Text(
                                              '12 dias',
                                              textAlign: TextAlign.left, 
                                              style: TextStyle(fontFamily: 'BrunoAce', fontSize: 26, color: Color(0xff27acc1))
                                            ),
                                            Text(
                                              'até próxima',
                                              textAlign: TextAlign.left, 
                                              style: TextStyle(fontFamily: 'BrunoAce', fontSize: 18, color: Color(0xff27acc1))
                                            ),
                                            Text(
                                              'consulta.',
                                              textAlign: TextAlign.justify,
                                              style: TextStyle(fontFamily: 'BrunoAce', fontSize: 18, color: Color(0xff27acc1))
                                            ),
                                          ],
                                        ),
                                      )
                                    ]
                                  ),
                                ),
                              ),
                            ),
                            Container(
                              width: 200,
                              height: 100,
                              child: Card(
                                elevation: 2,
                                shape: RoundedRectangleBorder(borderRadius:  BorderRadius.circular(7)),
                                child: Padding(
                                  padding: const EdgeInsets.all(5.0),
                                  child: Stack(
                                    children: <Widget>[
                                      Positioned(
                                         right: 3,
                                          top: 0,
                                          child: Opacity(
                                          opacity: 0.2,
                                          child: Image.asset('images/pill_case.png', width: 100, height: 75)
                                        ),
                                      ),
                                      Positioned(
                                        top: 0,
                                        left: 5,
                                        child: Column(
                                          crossAxisAlignment: CrossAxisAlignment.start,
                                          children: [
                                            Text(
                                              '31 dias',
                                              textAlign: TextAlign.left, 
                                              style: TextStyle(fontFamily: 'BrunoAce', fontSize: 26, color: Color(0xff27acc1))
                                            ),
                                            Text(
                                              'até comprar',
                                              textAlign: TextAlign.left, 
                                              style: TextStyle(fontFamily: 'BrunoAce', fontSize: 18, color: Color(0xff27acc1))
                                            ),
                                            Text(
                                              'medicamento.',
                                              textAlign: TextAlign.justify,
                                              style: TextStyle(fontFamily: 'BrunoAce', fontSize: 18, color: Color(0xff27acc1))
                                            ),
                                          ],
                                        ),
                                      )
                                    ]
                                  ),
                                ),
                              ),
                            )
                          ],
                        ),
                        Card(
                          elevation: 2,
                          shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(7)),
                          child: Row(
                            children: <Widget>[
                              Container(
                                child: Image.asset('images/card_pills.png'),
                                height: 80,
                                width: 80,
                                decoration: BoxDecoration(
                                  color: Color(0xfff47e71),
                                  borderRadius: BorderRadius.all(Radius.circular(7))
                                ),
                              )
                            ],
                          ),
                        ),
                        Card(
                          elevation: 2,
                          shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(7)),
                          child: Row(
                            children: <Widget>[
                              Container(
                                child: Image.asset('images/card_stet_heart.png'),
                                height: 80,
                                width: 80,
                                decoration: BoxDecoration(
                                  color: Color(0xff3865b9),
                                  borderRadius: BorderRadius.all(Radius.circular(7))
                                ),
                              )
                            ],
                          ),
                        ),
                        Card(
                          elevation: 2,
                          shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(7)),
                          child: Padding(
                            padding: const EdgeInsets.all(8.0),
                            child: Column(
                              children: <Widget>[
                                Text('Histórico', style: TextStyle(fontFamily: 'BrunoAce', fontSize: 24, color: Color(0xff27acc1),  )  ),
                                Divider(),
                                Row(
                                  mainAxisAlignment: MainAxisAlignment.spaceEvenly,
                                  children: <Widget>[
                                    Image.asset('images/list_credit_card.png'),
                                    Text('1 - <MEDICAMENTO> - 19/08/2020', style: TextStyle(fontFamily: 'BrunoAce', fontSize: 16, color: Color(0xff27acc1)  )  ),
                                  ],
                                ),
                                Divider(),
                                Row(
                                  mainAxisAlignment: MainAxisAlignment.spaceEvenly,
                                  children: <Widget>[
                                    Image.asset('images/list_credit_card.png'),
                                    Text('1 - <MEDICAMENTO> - 19/08/2020', style: TextStyle(fontFamily: 'BrunoAce', fontSize: 16, color: Color(0xff27acc1)  )  ),
                                  ],
                                ),
                                Divider(),
                                Row(
                                  mainAxisAlignment: MainAxisAlignment.spaceEvenly,
                                  children: <Widget>[
                                    Image.asset('images/list_pill.png'),
                                    Text('30 - <MEDICAMENTO> - 19/08/2020', style: TextStyle(fontFamily: 'BrunoAce', fontSize: 16, color: Color(0xff27acc1)  )  ),
                                  ],
                                ),
                                Divider(),
                                Row(
                                  mainAxisAlignment: MainAxisAlignment.spaceEvenly,
                                  children: <Widget>[
                                    Image.asset('images/list_pill.png'),
                                    Text('1 - <MEDICAMENTO> - 19/08/2020', style: TextStyle(fontFamily: 'BrunoAce', fontSize: 16, color: Color(0xff27acc1)  )  ),
                                  ],
                                ),
                                Divider()
                              ],
                            ),
                          ),
                        )
                      ],
                    ) 
                  )
                ),
              ),
            ),
          ),
        ]
      ),
    );
  }
}

Answer 1

使用expanded的小部件包裝 SingleChildScrollView 小部件。
它應該做的工作。 因為要使 singleChildScrollView 正常工作，它不會滾動某些高度和寬度。
希望能幫助到你。