Question

这是完整的代码：

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'的参数”。

Answer 1

您可能想使用Row或Column小部件，该部件允许您提供多个子级（均为Flex widgets）。

在这种情况下，您可能想要这样的东西：

Container(
  color: Color(0xff258DED),
  height: 400.0,
  alignment: Alignment.center,
  child: Column(
    children: <Widget>[
      Container(..),
      Container(..),
    ],
  ),
)

也有Stack的小部件应彼此重叠显示。它在代码方面的工作方式相同。

Answer 2

如果您试图在一个容器中放置多个孩子，则您希望将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
                                    ),
                                ),
                            ),
                        ],
                    ),
                ),
            ),
        );
    }
}

Answer 3

在容器中只能是孩子。如果要垂直放置容器，则必须使用“列”窗口小部件并将“容器”窗口小部件添加为子窗口。

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

提示＃1不必使用“新”字来创建对象。提示＃2了解flutter.dev上的列，行和堆栈

Answer 4

请检查以下代码：-

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

有没有办法在一个容器中包含多个子代？

4 个答案: