是否可以在Flutter中将A列连续放置?

时间:2019-09-12 22:50:09

标签: flutter-layout

我尝试将一列连续放置。但这不起作用。

然后,我尝试使用不同的子属性将行和列放在相同的安全区域中。它不起作用。

该列应位于行的中间。

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        backgroundColor: Colors.teal,
        body: SafeArea(
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            crossAxisAlignment: CrossAxisAlignment.center,
            children: <Widget>[
              Container(
                height: 100.0,
                width: 100.0,
                color: Colors.yellow,
                child: Text('Container 1'),
              ),
              Container(
                height: 100.0,
                width: 100.0,
                color: Colors.green,
                child: Text('Container 1'),
              ),
              Container(
                width: double.infinity,
              ),
            ],
          ),
          child: Row(
            crossAxisAlignment: CrossAxisAlignment.stretch,
            mainAxisAlignment: MainAxisAlignment.spaceBetween,
            children: <Widget>[
              Container(
                height: 100.0,
                color: Colors.red,
                child: Text('Container 1'),
              ),
              Container(
                height: 100.0,
                color: Colors.blue,
                child: Text('Container 1'),
              ),
            ],
          ),
        ),
      ),
    );
  }
}

错误消息是“ BoxConstraints强制无限宽度。”

2 个答案:

答案 0 :(得分:0)

尝试使用具有flex属性的扩展窗口小部件,您可以将该列放在一行中:

var xHFType = document.getElementById('<% =HFType.ClientID %>').value;
labels: xHFTypee,

答案 1 :(得分:0)

此外,您可以使用column

放置container
body: SafeArea(
      child: Row(
        crossAxisAlignment: CrossAxisAlignment.stretch,
        mainAxisAlignment: MainAxisAlignment.spaceBetween,
        children: <Widget>[
          Container(
            width: 100.0,
            color: Colors.red,
          ),
          Container(
            child: Column(
              crossAxisAlignment: CrossAxisAlignment.center,
              mainAxisAlignment: MainAxisAlignment.center,
              children: <Widget>[
                Container(
                  width: 100.0,
                  height: 100.0,
                  color: Colors.yellow,
                ),
                Container(
                  width: 100.0,
                  height: 100.0,
                  color: Colors.green,
                ),
              ],
            ),
          ),
          Container(
            width: 100.0,
            color: Colors.blue,
          ),
        ],
      ),
    ),