如何正确地将一个小部件堆叠到另一个上？

Posted 2023-02-23

【中文标题】如何正确地将一个小部件堆叠到另一个上？

【英文标题】：How to properly stack one widget onto another in flutter?

【发布时间】：2021-07-21 05:36:40

【问题描述】：

我想要实现的是在按下按钮时将一个小部件堆叠到另一个带有平滑动画的小部件上。下面是我想要实现的截图（从左到右）。感谢任何帮助！

【参考方案1】：

您可以使用Stack 小部件。

访问this article了解更多

【参考方案2】：

您可以尝试以下操作，使用卡片、AnimatedPositioned 和其他一些小部件

import 'dart:developer';

import 'package:flutter/material.dart';

void main() 
  runApp(MyApp());


class MyApp extends StatelessWidget 
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) 
    return MaterialApp(
      title: 'Stack Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
        visualDensity: VisualDensity.adaptivePlatformDensity,
      ),
      home: MyHomePage(title: 'Stack Demo'),
    );
  


class MyHomePage extends StatefulWidget 
  MyHomePage(Key key, this.title) : super(key: key);

  final String title;

  @override
  _MyHomePageState createState() => _MyHomePageState();


class _MyHomePageState extends State<MyHomePage> 
  int _counter = 0;
  bool showed = false;
  double incrementBoxHeight = 50;

  void incrementCounter() 
    setState(() 
      _counter++;
    );
  

  void decrementCounter() 
    setState(() 
      if (_counter > 0) 
        _counter--;
      
    );
  

  void togleDetail() 
    setState(() 
      showed = !showed;
    );
  

  @override
  Widget build(BuildContext context) 
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Center(
        child: Card(
            child: Stack(
          children: [
            Image(image: AssetImage('asset/img/indice.jpeg')),
            AnimatedPositioned(
              duration: Duration(seconds: 1),
              bottom: showed ? incrementBoxHeight : 0,
              right: 0,
              left: 0,
              child: GestureDetector(
                onTap: togleDetail,
                child: Container(
                  height: 50, //you can do it with mediaQuery
                  decoration: BoxDecoration(
                    boxShadow: [
                      BoxShadow(
                        color: Colors.black,
                        blurRadius: 5.0,
                        spreadRadius: 2.0,
                      ),
                    ],
                    color: Colors.blueAccent,
                    borderRadius: BorderRadius.only(
                      topLeft: Radius.circular(10),
                      topRight: Radius.circular(10),
                    ),
                  ),
                  child: Row(
                    children: [
                      SizedBox(
                        width: 10,
                      ),
                      Column(
                        children: [
                          Text(
                            "Topt",
                            style: TextStyle(fontSize: 20),
                          ),
                          Text(
                            "8 TMT",
                            style: TextStyle(fontSize: 20, color: Colors.red),
                          )
                        ],
                      ),
                    ],
                  ),
                ),
              ),
            ),
            Visibility(
              visible: showed,
              child: Positioned(
                bottom: 0,
                right: 0,
                left: 0,
                child: Container(
                  height: incrementBoxHeight, //you can do it with mediaQuery
                  decoration: BoxDecoration(
                    boxShadow: [
                      BoxShadow(
                        color: Colors.black,
                        blurRadius: 5.0,
                        spreadRadius: 2.0,
                      ),
                    ],
                    color: Colors.blueAccent,
                    borderRadius: BorderRadius.only(
                      topLeft: Radius.circular(10),
                      topRight: Radius.circular(10),
                    ),
                  ),
                  child: Row(
                    mainAxisAlignment: MainAxisAlignment.spaceAround,
                    children: [
                      GestureDetector(
                        onTap: decrementCounter,
                        child: CircleAvatar(
                          child: Icon(
                            Icons.remove,
                            size: 30,
                          ),
                        ),
                      ),
                      Text(
                        _counter.toString(),
                        style: TextStyle(fontSize: 48),
                      ),
                      GestureDetector(
                        onTap: incrementCounter,
                        child: CircleAvatar(
                            child: Icon(
                          Icons.add,
                          size: 30,
                        )),
                      )
                    ],
                  ),
                ),
              ),
            ),
          ],
        )),
      ),
    );
  

这是结果，你可以编辑来实现你的ui，因为这只是你界面的一般结构！

【讨论】：

嘿。抱歉回复晚了。感谢帮助。我使用您的代码做了一些解决方法