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

Question

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

当用户点击 Widget B 时，Widget B 会缩小，Widget A 会放大，单击较小的 widget 时应更改堆栈位置。

如有代码示例供参考，将不胜感激！

Answer 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,
                ),
              ),
            ),
          ],
        ),
      ),
    );
  }
}

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

How to switching the stack's widget of index

dart

flutter

flutter-widget