时间戳

首页 > 解决方案 > Flutter - 容器是否有动态展开和折叠功能？

flutter - Flutter - 容器是否有动态展开和折叠功能？

问题描述

我希望能够动态添加包含各种小部件的行。我目前这样做的方式是创建 3 个具有我需要的小部件的独特容器并根据级别缩进它们，但必须有一些东西已经这样做了？

我希望能够单击 + 或 - 按钮来展开或折叠底部的容器

以下是完整的 main.dart 代码：

    import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: Text('Appbar for nested'),),
        body: SafeArea(
          child: NestedStuff(),
        ),
      )
    );
  }
}

class NestedStuff extends StatefulWidget {
  @override
  _NestedStuffState createState() => _NestedStuffState();
}

class _NestedStuffState extends State<NestedStuff> {

  @override
  Widget build(BuildContext context) {
    return Column(
      children: [
        RowWidgetOne(),
        RowWidgetTwo(),
        RowWidgetThree(),
        RowWidgetTwo(),
        RowWidgetThree(),
        RowWidgetThree(),

      ],
    );
  }
}

class RowWidgetOne extends StatelessWidget {
//   const RowWidget({
//     Key key,
//   }) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Padding(
      padding: const EdgeInsets.fromLTRB(25,8.0,8,25),
      child: Container(
        color: Colors.blue,
        padding: EdgeInsets.all(10.0),
        child: Row(
          children: <Widget> [
            CircleAvatar(
              child: Icon(Icons.remove),
              backgroundColor: Colors.lightBlue,
            ),
            Text('sometext'),
          ],
        ),
      ),
    );
  }
}

class RowWidgetTwo extends StatelessWidget {
//   const RowWidget({
//     Key key,
//   }) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Padding(
      padding: const EdgeInsets.fromLTRB(50,1.0,1.0,25),
      child: Container(
        color: Colors.green,
        padding: EdgeInsets.all(10.0),
        child: Row(
          children: <Widget> [
            CircleAvatar(
              child: Icon(Icons.remove),
              backgroundColor: Colors.purple,
            ),
            Text('sometext'),
          ],
        ),
      ),
    );
  }
}

class RowWidgetThree extends StatelessWidget {
//   const RowWidget({
//     Key key,
//   }) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Padding(
      padding: const EdgeInsets.fromLTRB(75,8.0,8,25),
      child: Container(
        color: Colors.grey,
        padding: EdgeInsets.all(10.0),
        child: Row(
          children: <Widget> [
            CircleAvatar(
              child: Icon(Icons.add),
              backgroundColor: Colors.lightBlue,
            ),
            Text('sometext'),
          ],
        ),
      ),
    );
  }
}

标签： flutter

解决方案

您可以使用Visibility小部件

  bool _visibility = false;
  Column(
    children: [
      // first row including + and - button changing _visibility value,
      Visibility(
        visible: _visibility,
        child: Column(
          children: [
            //other children
          ],
        ),
      )
    ],
  )

推荐阅读