如何在 Flutter 的布局中添加或删除组件？

Question

如何在 Flutter 应用程序中添加和删除任何小部件，例如 Container 或 Text？就像在你按下任何按钮的屏幕上，它会添加或删除由 ViewItems 和 Edititems 小部件组成的组件。

执行在 Android 中，您对父视图调用 addChild() 或 removeChild() 以动态添加或删除子视图。那么在 Flutter 中有这样的方法吗？

我们如何在 flutter 中从布局中添加和删除小部件？

Answer 1

在 Flutter 中，因为小部件是不可变的，所以没有直接等同于 addChild()。相反，您可以将一个函数传递给 returns 小部件的父级，并使用布尔标志控制该子级的创建。

例如，当您点击 FloatingActionButton 时，您可以在两个小部件之间切换：

import 'package:flutter/material.dart';

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

class SampleApp extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Sample App',
      debugShowCheckedModeBanner: false,
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: SampleAppPage(),
    );
  }
}

class SampleAppPage extends StatefulWidget {
  SampleAppPage({Key key}) : super(key: key);

  @override
  _SampleAppPageState createState() => _SampleAppPageState();
}

class _SampleAppPageState extends State<SampleAppPage> {
  // Default value for toggle
  bool toggle = true;
  void _toggle() {
    setState(() {
      toggle = !toggle;
    });
  }

  _getToggleChild() {
    if (toggle) {
      return Container(
          width: 200,
          height: 40,
          color: Colors.amber,
          child: Center(child: Text('Tony Stark')));
    } else {
      return Container(
          width: 200,
          height: 40,
          color: Colors.grey.shade200,
          child: Center(
              child: TextField(
            autofocus: true,
            decoration: new InputDecoration(
                contentPadding:
                    EdgeInsets.only(left: 10, bottom: 11, top: 11, right: 15),
                hintText: "Edit name"),
          )));
    }
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("Sample App"),
      ),
      body: Center(
        child: _getToggleChild(),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: _toggle,
        tooltip: 'Update Text',
        child: Icon(Icons.update),
      ),
    );
  }
}

Answer 2

据我了解，您想要像下面这样的用户。

Row row = new Row();
row.children.add(Text("data"));
body: row,

但在 flutter 中不能这样使用。

我在 below.In 我的观点中写了一段代码供您理解。首先学习 setState 概念。

import 'package:flutter/material.dart';

import 'main.dart';

class WidgetAdd extends StatefulWidget {
  @override
  _WidgetAddState createState() => _WidgetAddState();
}

class _WidgetAddState extends State<WidgetAdd> {
  List<Widget> widgets = new List<Widget>();
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        actions: [
          FlatButton(onPressed: (){
            setState(() {
              _addWidget();
            });
          }, child: Text("Add Widget")),
          FlatButton(onPressed: (){
            setState(() {
              _addWidget();
            });
          }, child: Text("Remove Widget"))
        ],
      ),
      body: Column(
        children: widgets,
      ),
    );
  }

  _addWidget() {
    Widget widget = Text("data");
    widgets.add(widget);
  }

  _removeWidget() {
    if(widgets.length >0){
      widgets.removeLast();
    }
  }
}

enter image description here

如何在 Flutter 的布局中添加或删除组件？

How do add or remove a component from the layout in Flutter?

flutter

dart

layout

flutter-layout

flutter-widget