首页 > 解决方案 > 有没有办法在一个容器中包含多个孩子?

问题描述

这是完整的代码:

class Application extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return new MaterialApp(
      home: new Scaffold(
       body: new Container(
         color: Color(0xff258DED),
         height: 400.0,
         alignment: Alignment.center,
         child: new Container(
           height: 200.0,
           width: 200.0,
           decoration: new BoxDecoration(
             image: DecorationImage(
                 image: new AssetImage('assets/logo.png'),
             fit: BoxFit.fill
             ),
             shape: BoxShape.circle
           ),
         ),
         child: new Container(
          child: new Text('Welcome to Prime Message',
            textAlign: TextAlign.center,
            style: TextStyle(
                fontFamily: 'Aleo',
                fontStyle: FontStyle.normal,
                fontWeight: FontWeight.bold,
                fontSize: 25.0,
                color: Colors.white
            ),
          ),
         ),
        ),
      ),
    );
  }
}

我尝试Container在顶部添加一个,然后在其中添加两个孩子。第一个孩子工作正常,但第二个孩子给了我错误,例如“已指定命名参数'child'的参数”。

标签: flutterdartflutter-layout

解决方案


如果您尝试将多个孩子放入容器中,您希望将其视为Row()Column()类为线性的。Stack()如果您想让浮动的孩子彼此重叠,则使用此选项。

例如:

class Application extends StatelessWidget {
    @override
    Widget build(BuildContext context) {
        return new MaterialApp(
            home: new Scaffold(
                body: new Container(
                    color: Color(0xff258DED),
                    height: 400.0,
                    alignment: Alignment.center,
                    child: new Column(
                        children: [
                            new Container(
                                height: 200.0,
                                width: 200.0,
                                decoration: new BoxDecoration(
                                    image: DecorationImage(
                                        image: new AssetImage('assets/logo.png'),
                                        fit: BoxFit.fill
                                    ),
                                    shape: BoxShape.circle
                                ),
                            ),
                            new Container(
                                child: new Text('Welcome to Prime Message',
                                    textAlign: TextAlign.center,
                                    style: TextStyle(
                                        fontFamily: 'Aleo',
                                        fontStyle: FontStyle.normal,
                                        fontWeight: FontWeight.bold,
                                        fontSize: 25.0,
                                        color: Colors.white
                                    ),
                                ),
                            ),
                        ],
                    ),
                ),
            ),
        );
    }
}

推荐阅读