Flutter

Question

在flutter中，是否可以将卡片的一部分放在另一个容器上？在 CSS 中，我们会将 margin-top 设置为负值或使用 translate 属性。在 flutter 中，我们不能为 margin-top 设置负值，有没有替代方法？

Answer 1

是的，您可以使用 Stack 小部件来实现它。您可以在背景上堆叠卡片并提供顶部或底部填充。

一个简单的例子如下：

class StackDemo extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return new Stack(
      children: <Widget>[
        // The containers in the background
        new Column(
          children: <Widget>[
            new Container(
              height: MediaQuery.of(context).size.height * .65,
              color: Colors.blue,
            ),
            new Container(
              height: MediaQuery.of(context).size.height * .35,
              color: Colors.white,
            )
          ],
        ),
        // The card widget with top padding, 
        // incase if you wanted bottom padding to work, 
        // set the `alignment` of container to Alignment.bottomCenter
        new Container(
          alignment: Alignment.topCenter,
          padding: new EdgeInsets.only(
              top: MediaQuery.of(context).size.height * .58,
              right: 20.0,
              left: 20.0),
          child: new Container(
            height: 200.0,
            width: MediaQuery.of(context).size.width,
            child: new Card(
              color: Colors.white,
              elevation: 4.0,
            ),
          ),
        )
      ],
    );
  }
}

以上代码的输出类似于：

希望对您有所帮助！

Answer 2

这里是运行叠加示例：

class _MyHomePageState extends State<MyHomePage> {
     double _width = 0.0;
     double _height = 0.0;

     @override
     Widget build(BuildContext context) {
      _width = MediaQuery.of(context).size.width;
      _height = MediaQuery.of(context).size.height;
      return Scaffold(
       backgroundColor: Colors.white,
       body: Stack(
        children: <Widget>[
          // The containers in the background and scrollable
         getScrollableBody(),

         // This container will work as Overlay
         getOverlayWidget()
        ],
      ),
   );
 }

 Widget getOverlayWidget() {
   return new Container(
     alignment: Alignment.bottomCenter,
     child: new Container(
      height: 100.0,
      width: _width,
      color: Colors.cyan.withOpacity(0.4),
     ),
   );
 }
 Widget getScrollableBody() {
  return SingleChildScrollView(
    child: new Column(
      children: <Widget>[
        new Container(
         height: _height * .65,
         color: Colors.yellow,
       ),
       new Container(
         height: _height * .65,
         color: Colors.brown,
       ),
       new Container(
        margin: EdgeInsets.only(bottom: 100.0),
        height: _height * .65,
        color: Colors.orange,
       ),
     ],
   ),
  );
 }
}

这是代码的结果： Scrollable Body under customised Bottom Bar

Answer 3

截图：

您应该使用 Align.

而不是硬编码 Positioned 或 Container

代码：

@override
Widget build(BuildContext context) {
  final size = MediaQuery.of(context).size;
  return Scaffold(
    body: Stack(
      children: [
        Column(
          children: [
            Expanded(flex: 2, child: Container(color: Colors.indigo)),
            Expanded(child: Container(color: Colors.white)),
          ],
        ),
        Align(
          alignment: Alignment(0, 0.5),
          child: Container(
            width: size.width * 0.9,
            height: size.height * 0.4,
            child: Card(
              elevation: 12,
              child: Center(child: Text('CARD', style: Theme.of(context).textTheme.headline2)),
            ),
          ),
        ),
      ],
    ),
  );
}

Flutter - 在容器上覆盖卡片小部件

Flutter - Overlay card widget on a container

overlay

dart

flutter-layout

flutter-widget