高度大于屏幕高度的 flutter 可滚动堆栈

Question

我有一个小部件层次结构，其中 SingleChildScrollView 是父级，Stack 作为子级，Stack 有两个子级，如果第二个 child 超出屏幕高度，其高度被剪裁。根据文档，堆栈根据 Non-Positioned 子项占用大小。所以这意味着我们必须明确地给 Stack 一个高度，但是这个高度是任意的，它不会包裹里面的内容。我的主要目的是包装 SingleChildScrollView 高度，而不是在底部留出空白空间。

SingleChildScrollView(
    child: Container(
      height: MediaQuery.of(context).size.height + 150,
      child: SafeArea(
        bottom: false,
        child: Stack(
           fit: StackFit.expand,
          children: <Widget>[
              Container(height:MediaQuery.of(context).size.height * .35,),
              Positioned(top: top: MediaQuery.of(context).size.height * .35 +
                  MediaQuery.of(context).viewInsets.top,..)
                 ...]))))

[![图片][1]][1]

[1]: /image/ZnoP0.png

Answer 1

解决方案 #1

如果这不是您想要的，请告诉我。

void main() => runApp(MaterialApp(home: HomePage()));

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

class _HomePageState extends State<HomePage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Column(
        children: <Widget>[
          Container(
            padding: EdgeInsets.only(top: 44, left: 24, right: 24, bottom: 20),
            color: Colors.deepPurpleAccent,
            child: Column(
              mainAxisSize: MainAxisSize.min,
              children: <Widget>[
                Row(
                  children: <Widget>[
                    IconButton(
                      icon: Icon(Icons.arrow_back),
                      onPressed: () {},
                      color: Colors.white,
                    ),
                    Spacer(),
                    IconButton(
                      icon: Icon(Icons.more_vert),
                      onPressed: () {},
                      color: Colors.white,
                    ),
                  ],
                ),
                Row(
                  crossAxisAlignment: CrossAxisAlignment.start,
                  children: <Widget>[
                    Container(color: Colors.white, width: 100, height: 100),
                    Padding(
                      padding: const EdgeInsets.symmetric(horizontal: 12.0),
                      child: Column(
                        crossAxisAlignment: CrossAxisAlignment.start,
                        children: <Widget>[
                          _myText("Your name", 16),
                          _myText("24 years old", 14),
                          SizedBox(height: 6),
                          _myText("Martial status", 16),
                          _myText("Unmarried", 14),
                          SizedBox(height: 6),
                          Container(padding: EdgeInsets.all(4), color: Colors.blue, child: _myText("PLUS PLAN - 1 DAY LEFT", 12)),
                          SizedBox(height: 12),
                        ],
                      ),
                    ),
                  ],
                ),
                SizedBox(
                  width: double.maxFinite,
                  child: OutlineButton(
                    borderSide: BorderSide(color: Colors.white, width: 2),
                    onPressed: () {},
                    child: _myText("CHANGE PLAN", 16),
                  ),
                ),
                Text(
                  "Higher plans give you more connects",
                  style: TextStyle(fontSize: 10, color: Colors.white70),
                ),
              ],
            ),
          ),
          Expanded(
            child: ListView(
              children: <Widget>[
                _buildCard1(),
                _buildCard(size: 70, color: Colors.deepOrange),
                _buildCard(size: 80, color: Colors.purple),
                _buildCard(size: 90, color: Colors.pink),
                _buildCard(size: 100, color: Colors.grey),
              ],
            ),
          ),
        ],
      ),
    );
  }

  Widget _myText(String data, double size) => Text(data, style: TextStyle(fontSize: size, color: Colors.white));

  Widget _buildCard1() {
    return Card(
      elevation: 4,
      margin: EdgeInsets.all(12),
      child: Column(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: <Widget>[
          Padding(
            padding: const EdgeInsets.all(8.0),
            child: Text("PROFILE DETAILS"),
          ),
          Placeholder(fallbackHeight: 200),
          Divider(),
          SizedBox(
            width: double.maxFinite,
            child: FlatButton(
              onPressed: () {},
              child: Text("UPDATE MY PROFILE"),
            ),
          ),
        ],
      ),
    );
  }

  Widget _buildCard({double size, Color color}) {
    return Card(
      margin: EdgeInsets.all(12),
      child: Container(height: size, color: color,),
    );
  }
}

---

解决方案#2

这就是你要找的吗？ (这里我只修改了上面的 build() 方法，其余方法保持不变。

@override
Widget build(BuildContext context) {
  return Scaffold(
    backgroundColor: Colors.deepPurpleAccent,
    body: SafeArea(
      child: ListView(
        children: <Widget>[
          Container(
            padding: EdgeInsets.only(top: 12, left: 24, right: 24, bottom: 20),
            color: Colors.deepPurpleAccent,
            child: Column(
              mainAxisSize: MainAxisSize.min,
              children: <Widget>[
                Row(
                  children: <Widget>[
                    IconButton(
                      icon: Icon(Icons.arrow_back),
                      onPressed: () {},
                      color: Colors.white,
                    ),
                    Spacer(),
                    IconButton(
                      icon: Icon(Icons.more_vert),
                      onPressed: () {},
                      color: Colors.white,
                    ),
                  ],
                ),
                Row(
                  crossAxisAlignment: CrossAxisAlignment.start,
                  children: <Widget>[
                    Container(color: Colors.white, width: 100, height: 100),
                    Padding(
                      padding: const EdgeInsets.symmetric(horizontal: 12.0),
                      child: Column(
                        crossAxisAlignment: CrossAxisAlignment.start,
                        children: <Widget>[
                          _myText("Your name", 16),
                          _myText("24 years old", 14),
                          SizedBox(height: 6),
                          _myText("Martial status", 16),
                          _myText("Unmarried", 14),
                          SizedBox(height: 6),
                          Container(padding: EdgeInsets.all(4), color: Colors.blue, child: _myText("PLUS PLAN - 1 DAY LEFT", 12)),
                          SizedBox(height: 12),
                        ],
                      ),
                    ),
                  ],
                ),
                SizedBox(
                  width: double.maxFinite,
                  child: OutlineButton(
                    borderSide: BorderSide(color: Colors.white, width: 2),
                    onPressed: () {},
                    child: _myText("CHANGE PLAN", 16),
                  ),
                ),
                Text(
                  "Higher plans give you more connects",
                  style: TextStyle(fontSize: 10, color: Colors.white70),
                ),
              ],
            ),
          ),
          Container(
            decoration: BoxDecoration(
              color: Colors.white,
              borderRadius: BorderRadius.horizontal(left: Radius.circular(30), right: Radius.circular(30))
            ),
            child: Column(
              children: <Widget>[
                _buildCard1(),
                _buildCard(size: 70, color: Colors.deepOrange),
                _buildCard(size: 80, color: Colors.purple),
                _buildCard(size: 90, color: Colors.pink),
                _buildCard(size: 100, color: Colors.grey),
              ],
            ),
          ),
        ],
      ),
    ),
  );
}

---

解决方案 #3

@override
Widget build(BuildContext context) {
  return Scaffold(
    body: SafeArea(
      child: DecoratedBox(
        decoration: BoxDecoration(image: DecorationImage(image: AssetImage("your_image_here"), fit: BoxFit.cover)),
        child: CustomScrollView(
          slivers: <Widget>[
            SliverAppBar(
              expandedHeight: 300,
              flexibleSpace: FlexibleSpaceBar(
                collapseMode: CollapseMode.pin,
                background: Container(
                  decoration: BoxDecoration(image: DecorationImage(image: AssetImage("your_image_here"), fit: BoxFit.cover)),
                  padding: EdgeInsets.only(top: 12, left: 24, right: 24, bottom: 20),
                  child: Column(
                    mainAxisSize: MainAxisSize.min,
                    children: <Widget>[
                      Row(
                        children: <Widget>[
                          IconButton(
                            icon: Icon(Icons.arrow_back),
                            onPressed: () {},
                            color: Colors.white,
                          ),
                          Spacer(),
                          IconButton(
                            icon: Icon(Icons.more_vert),
                            onPressed: () {},
                            color: Colors.white,
                          ),
                        ],
                      ),
                      Row(
                        crossAxisAlignment: CrossAxisAlignment.start,
                        children: <Widget>[
                          Container(color: Colors.white, width: 100, height: 100),
                          Padding(
                            padding: const EdgeInsets.symmetric(horizontal: 12.0),
                            child: Column(
                              crossAxisAlignment: CrossAxisAlignment.start,
                              children: <Widget>[
                                _myText("Your name", 16),
                                _myText("24 years old", 14),
                                SizedBox(height: 6),
                                _myText("Martial status", 16),
                                _myText("Unmarried", 14),
                                SizedBox(height: 6),
                                Container(padding: EdgeInsets.all(4), color: Colors.blue, child: _myText("PLUS PLAN - 1 DAY LEFT", 12)),
                                SizedBox(height: 12),
                              ],
                            ),
                          ),
                        ],
                      ),
                      SizedBox(
                        width: double.maxFinite,
                        child: OutlineButton(
                          borderSide: BorderSide(color: Colors.white, width: 2),
                          onPressed: () {},
                          child: _myText("CHANGE PLAN", 16),
                        ),
                      ),
                      Text(
                        "Higher plans give you more connects",
                        style: TextStyle(fontSize: 10, color: Colors.white70),
                      ),
                    ],
                  ),
                ),
              ),
            ),
            SliverList(
              delegate: SliverChildListDelegate(
                [
                  Container(
                    decoration: BoxDecoration(
                        color: Colors.orange,
                        borderRadius: BorderRadius.horizontal(
                          left: Radius.circular(30),
                          right: Radius.circular(30),
                        )),
                    child: Column(
                      children: <Widget>[
                        _buildCard1(),
                        _buildCard(size: 100, color: Colors.deepOrange),
                        _buildCard(size: 80, color: Colors.purple),
                        _buildCard(size: 100, color: Colors.pink),
                        _buildCard(size: 180, color: Colors.grey),
                      ],
                    ),
                  ),
                ],
              ),
            ),
          ],
        ),
      ),
    ),
  );
}