水平扩展小部件

Question

我试图将两个小部件排成一行，将其分成两半。当你点击其中一个时，它就会分开，第二个就消失了。但到目前为止，我在关闭时会溢出。

import 'package:flutter/material.dart';

void main() {
  runApp(const MyHomePage(title: 'Flutter Demo Home Page'));
}

class AccountSecurityPage extends StatefulWidget {
  const AccountSecurityPage({super.key});

  @override
  State<AccountSecurityPage> createState() => _AccountSecurityPageState();
}

class _AccountSecurityPageState extends State<AccountSecurityPage> {
  int count = 0;
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: Scaffold(
        backgroundColor: Colors.white,
        appBar: AppBar(title: const Text("Account Security")),
        body: Column(
          children: [
            const Column(
              children: [
                Row(
                  children: [
                    Text(
                      "Two-factor authentication",
                      style: TextStyle(fontWeight: FontWeight.w700),
                    ),
                  ],
                ),
                Wrap(
                  children: [
                    Text(
                        "To protect your account, we recommend enabling at least one type of two-factor authentication")
                  ],
                )
              ],
            ),
            Row(
              mainAxisSize: MainAxisSize.max,
              children: [
                HorizontalExpandedField(
                  select: count == 1,
                ),
                HorizontalExpandedField(
                  select: count == 2,
                ),
              ],
            )
          ],
        ),
      ),
    );
  }
}

我正在考虑使用 Hero 小部件，但我不明白如何在不深入根源的情况下实现它。 有一个选项可以使用Builder并通过它制作动画，但这太麻烦且不方便的设计

Answer 1

使用动画容器可能会有所帮助！ 试试这个；

    class SliderAppScreen extends StatefulWidget {
  @override
  _SliderAppScreenState createState() => _SliderAppScreenState();
}

class _SliderAppScreenState extends State<SliderAppScreen> {
  bool isSplit = false;

  void toggleSplit() {
    setState(() {
      isSplit = !isSplit;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Slider App Example'),
      ),
      body: Row(
        children: [
          AnimatedContainer(
            duration: Duration(milliseconds: 300),
            width: isSplit
                ? MediaQuery.of(context).size.width / 2
                : MediaQuery.of(context).size.width,
            child: GestureDetector(
              onTap: toggleSplit,
              child: Container(
                color: Colors.blue,
                child: Center(
                  child: Text(
                    'Widget 1',
                    style: TextStyle(color: Colors.white),
                  ),
                ),
              ),
            ),
          ),
          AnimatedContainer(
            duration: Duration(milliseconds: 300),
            width: isSplit ? MediaQuery.of(context).size.width / 2 : 0,
            child: Visibility(
              visible: isSplit,
              child: GestureDetector(
                onTap: toggleSplit,
                child: Container(
                  color: Colors.red,
                  child: Center(
                    child: Text(
                      'Widget 2',
                      style: TextStyle(color: Colors.white),
                    ),
                  ),
                ),
              ),
            ),
          ),
        ],
      ),
    );
  }```
}