Question

在我的“设备”页面上的应用程序中，我目前有2个示例设备（作为Hero小部件），但最后我希望用户能够添加和删除设备。所以我添加了一个浮动动作按钮来添加一个新设备（第一个图像）。当它被按下时，应该弹出一个字段来输入一个名称。选择名称后，新设备应在“设备（英雄）”页面上可见。如果选择了它，我想进入第二页上的设备页面。

如果有人有一个想法，我将如何意识到我将非常感激！

英雄设备页面的代码：

    class DevicesPageHero extends StatelessWidget {
    @override
    Widget build(BuildContext context) {
        return Scaffold(
          appBar: AppBar(
            backgroundColor: color_1,
            title: Text('Devices'),
    ),
    body: Center(
      child:Row(
        children: [
        Hero(
        tag: 'matrix1',
        child: GestureDetector(
          onTap: () => Navigator.push(context, MaterialPageRoute(builder: (context) => MatrixPageOne())),
          child: Column(
                  children: <Widget>[
                          Image(  image: new AssetImage('imgs/matrix1.png'),
                                  height: 100,
                                  width: 100,),
                          Text("Matrix Kitchen", style: mytextStyle,),
                ]
              )
            ),
          ),
        Hero(
        tag: 'matrix2',
        child: GestureDetector(
          onTap: () => Navigator.push(context, MaterialPageRoute(builder: (context) => MatrixPageTwo())),
          child: Column(
                  children: <Widget>[
                          Image(  image: new AssetImage('imgs/matrix2.png'),
                                  height: 100,
                                  width: 100,),
                          Text("PARTY ROOM", style: mytextStyle,),
                ]
              )
            ),
          ),
        ] // wrap children
      )
    ),
    floatingActionButton: FloatingActionButton(
      onPressed: () {
        // Create new matrix page
      },
      child: Icon(Icons.add),
      backgroundColor: color_3,

    ),
    floatingActionButtonLocation: FloatingActionButtonLocation.centerFloat
    );
    }
}

“所选设备页面”的代码


    class MatrixPageOne extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        backgroundColor: color_1,
        title: Text('Matrix Kitchen'),
      ),
      body: Column(
        children: [ 
          Hero(            
            tag: 'matrix1',
            child:Image( image: new AssetImage('imgs/matrix1.png'),
                        height: 150,
                        width: 150
                        )  
              ),
        Container(
            width: MediaQuery.of(context).size.width, // returns Screen width           
            child: Text("  Live update Matrix Kitchen", style: TextStyle( fontSize: 15, fontFamily: "Arial", fontWeight: FontWeight.bold) ,/*textAlign: TextAlign.left*/),
          ),

        Divider(),
        Spacer(flex: 1),

        Container(
          width: MediaQuery.of(context).size.width,
          child:Text("  Option 1 ...", textAlign: TextAlign.left,),
        ),

        Divider(),
        Spacer(flex: 1),

        Container(
          width: MediaQuery.of(context).size.width,
          child:Text("  Option 2 ...", textAlign: TextAlign.left,),
        ),

        Divider(),
        Spacer(flex: 80),
        IconButton(
          icon: Icon(Icons.delete, color: Colors.red,),
          onPressed: (){
            //Delete Hero Page
          }
          )
        ], // Column children
      ),

    );
  }
}

Answer 1

您可以创建一个新的单个页面，然后将诸如tagName和Image之类的参数发送到该页面。在该页面上，您可以根据自己的喜好显示以前发送的数据。

例如：

..
onTap: () => Navigator.push(context, MaterialPageRoute(builder: (context) => MatrixPageTwo(
    'tagName': 'matrix2',
    'image': new AssetImage('imgs/matrix2.png'), height: 100, width: 100)
))),
..

然后，在该MatrixPageTwo页面上：

class MatrixPageTwo extends StatefulWidget {
    const MatrixPageTwo({ Key key, this.image, this.tagName }) : super(key: key);

    final Image image;
    final String tagName;

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

class _MatrixPageTwoState extends State<MatrixPageTwo> {
    @override
    Widget build(BuildContext context) {
        return Center(
            child: Text(widget.tagName),
        );
    }
}

如何使我可以在应用程序内部添加新的Hero-Page？

1 个答案: