如何切换堆栈的索引小部件答案

【问题标题】：How to switching the stack's widget of index如何切换堆栈的索引小部件
【发布时间】：2021-08-31 03:49:38
【问题描述】：

点击较小的小部件时如何平滑切换堆栈的小部件，如下图所示

当用户点击 Widget B 时，Widget B 会缩小，而 Widget A 会放大，并且点击较小的 Widget 时应该改变堆栈位置。

任何供参考的代码示例将不胜感激，谢谢！

【问题讨论】：

【解决方案1】：

试试这个：

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatefulWidget {
  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  Widget _a = Container(
      color: Colors.red, width: double.infinity, height: double.infinity);
  Widget _b = Container(
      color: Colors.green, width: double.infinity, height: double.infinity);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Container(
        alignment: Alignment.center,
        width: 400,
        height: 200,
        child: Stack(
          children: <Widget>[
            Container(
              width: 400,
              height: 200,
              child: _a,
            ),
            Positioned(
              bottom: 20,
              left: 20,
              child: GestureDetector(
                onTap: (){
                  Widget _swap = _b;
                  _b = _a;
                  _a = _swap;
                  setState((){});
                },
                child: Container(
                  width: 80,
                  height: 40,
                  child: _b,
                ),
              ),
            ),
          ],
        ),
      ),
    );
  }
}

【讨论】：