layout - Flutter:如何让 Card 与 AppBar 重叠？

Question

如何在 Flutter 中制作一个与 AppBar 重叠的 Card？据我所知，负利润率是不可能的。

为了清楚起见，请查看图片。

Answer 1

对于一张卡，可以用 Stack widget 轻松完成

例如

import 'package:flutter/material.dart';

class Home extends StatefulWidget {
  Home({Key key}) : super(key: key);

  @override
  HomeState createState() {
    return new HomeState();
  }
}

class HomeState extends State<Home> {
  bool _hasCard;

  @override
  void initState() {
    super.initState();
    _hasCard = false;
  }

  @override
  Widget build(BuildContext context) {
    List<Widget> children = new List();

    children.add(_buildBackground());
    if (_hasCard) children.add(_buildCard());

    return MaterialApp(
      home: Stack(
        children: children,
      ),
    );
  }

  void _showCard() {
    setState(() => _hasCard = true);
  }

  void _hideCard() {
    setState(() => _hasCard = false);
  }

  Widget _buildCard() => new Container(
        child: new Center(
          child: new Container(
            height: 700.0,
            width: 200.0,
            color: Colors.lightBlue,
            child: new Center(
              child: new Text("Card"),
            ),
          ),
        ),
      );

  Widget _buildBackground() => new Scaffold(
        appBar: new AppBar(
          title: new Text("AppBar"),
        ),
        body: new Container(
          child: _hasCard
              ? new FlatButton(
                  onPressed: _hideCard, child: new Text("Hide card"))
              : new FlatButton(
                  onPressed: _showCard, child: new Text("Show card")),
        ),
      );
}

void main() {
  runApp(
    new Home(),
  );
}

如果卡片很多，可以把它们包成ListView .