简体   繁体   English

Flutter:所有小部件都应在容器中垂直排列

[英]Flutter: all Widget should arranged vertically in container

I want to arrange all items vertically in the container, I have taken in a row and as wells as in column but unable to arrange vertically like Linear Layout vertical orientation. 我想将所有项目垂直排列在容器中,我已经在行中以及列中进行了排列,但是无法像Linear Layout垂直方向那样垂直排列。

void main() {
      runApp(new MaterialApp(
        title: "My Demooo2",
        home: new MyScaffold(),
      ));
    }

class MyBar extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return new Container(
      height: 90.0,
      margin: new EdgeInsets.symmetric(vertical: 20.0),
      padding: new EdgeInsets.all( 8.0),
      decoration: new BoxDecoration(color: Colors.blue[100]),
      child: new Row(
        children: <Widget>[
          new IconButton(icon: new Icon(Icons.adjust), onPressed: null),
          new IconButton(icon: new Icon(Icons.disc_full), onPressed: null),
          new IconButton(icon: new Icon(Icons.scatter_plot), onPressed: null),
          new IconButton(icon: new Icon(Icons.delete_forever), onPressed: null),
          new Text("test")
        ],
      ),
    );
  }
}

class MyScaffold extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return new Material(
      child: new Column(
        children: <Widget>[
          new MyBar(),
          new Expanded(
              child: new Center(
            child: new Text("My Center"),
          ))
        ],
      ),
    );
  }
}

在此处输入图片说明 在此处输入图片说明

I don't know you exact layout requirement - If i Understood your Question - Try this Code: 我不知道您的确切布局要求-如果我理解您的问题-请尝试以下代码:

class MyBar extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return new Container(
    //  height: 90.0,
      margin: new EdgeInsets.symmetric(vertical: 20.0),
      padding: new EdgeInsets.all( 8.0),
      decoration: new BoxDecoration(color: Colors.blue[100]),
      child: new Column(
        children: <Widget>[
          new IconButton(icon: new Icon(Icons.adjust), onPressed: null),
          new IconButton(icon: new Icon(Icons.disc_full), onPressed: null),
          new IconButton(icon: new Icon(Icons.scatter_plot), onPressed: null),
          new IconButton(icon: new Icon(Icons.delete_forever), onPressed: null),
          new Text("test")
        ],
      ),
    );
  }
}

class MyScaffold extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return new Material(
      child: new Column(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: <Widget>[
          new MyBar(),
          new Expanded(
              child: new Center(
                child: new Text("My Center"),
              ))
        ],
      ),
    );
  }
}

Output: 输出:

在此处输入图片说明

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM