时间戳

首页 > 解决方案 > 如何在我的应用程序中添加新的英雄页面？

flutter - 如何在我的应用程序中添加新的英雄页面？

问题描述

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

如果有人知道我怎么能意识到我会非常感激！

设备页面 所选设备（矩阵）页面

英雄设备页面代码： 

    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
      ),

    );
  }
}

标签： flutterdart

解决方案

您可以创建一个新的单个页面，然后将 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),
        );
    }
}

推荐阅读