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

Posted

技术标签:

【中文标题】如何在 Flutter 布局中添加或删除组件?【英文标题】:How do add or remove a component from the layout in Flutter? 【发布时间】:2021-03-21 14:03:08 【问题描述】:

如何在 Flutter 应用中添加和删除任何小部件,例如 Container 或 Text?就像在屏幕上按下任何按钮一样,它会添加或删除由 ViewItemsEdititems 小部件组成的组件。

android 中,您可以在父视图上调用 addChild()removeChild() 以动态添加或删除子视图。那么在 Flutter 中有这样的方法吗?

我们如何在 Flutter 布局中添加和删除小部件?

【问题讨论】:

试试这个添加小部件的例子:***.com/a/64097893/12789200 【参考方案1】:

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

例如,当您单击 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),
      ),
    );
  

【讨论】:

【参考方案2】:

据我了解,您希望像下面这样使用。

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

但在颤振中不要这样使用。

我在下面写了一个代码供你理解。我认为首先学习 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 布局中添加或删除组件?的主要内容,如果未能解决你的问题,请参考以下文章

如何在你的 Flutter 中使用 input chip 标签组件

如何在 Flutter 中更改布局

如何知道在相对布局中单击了哪个子视图

Flutter开发--如何布局?

如何删除文本字段中图标和文本之间的间距 - Flutter?

Flutter 常见问题总结