web-dev-qa-db-ja.com

フラッターテーブル構造

この構造を取得したい：

-----------------------------------------------------------------------------------
item 1                                 item 2
item 3                                 item 4
-----------------------------------------------------------------------------------

基本的に私は各Tableにcolumns with 2 rows with 2 columnが必要ですが、これは私が得る効果です：

これが私のコードです：

new Container(
          decoration: new BoxDecoration(color: Colors.grey),
          child: new Row(
            children: <Widget>[

              new Column(
                children: <Widget>[
                  new Container(
                    decoration: new BoxDecoration(color: Colors.red),
                    child: new Text("item 1"),
                  ),
                  new Container(
                    decoration: new BoxDecoration(color: Colors.amber),
                    child: new Text("item 3"),
                  ),
                ],
              ),

              new Column(
                children: <Widget>[
                  new Container(
                    decoration: new BoxDecoration(color: Colors.green),
                    child: new Text("item 2"),
                  ),
                  new Container(
                    decoration: new BoxDecoration(color: Colors.teal),
                    child: new Text("item 4"),
                  )
                ],
              )

            ],
          ),
        )

各columnに、利用可能なwidthスペースの半分を割り当ててもらいます。 Androidでは、weightプロパティを使用するだけです。

flutterflutter-layouttabular
4
Ale

flex（デフォルトでは1）を使用すると、2つの列を分離し、crossAxisAlignmentを使用してそれらの項目を最初に揃えることができます。 enter image description here

  new Container(
    decoration: new BoxDecoration(color: Colors.grey),
    child: new Row(
      children: <Widget>[
        Expanded(
          child: new Column(
            crossAxisAlignment: CrossAxisAlignment.start,
            children: <Widget>[
              new Container(
                decoration: new BoxDecoration(color: Colors.red),
                child: new Text("item 1"),
              ),
              new Container(
                decoration: new BoxDecoration(color: Colors.amber),
                child: new Text("item 3"),
              ),
            ],
          ),
        ),
        Expanded(
          child: new Column(
            crossAxisAlignment: CrossAxisAlignment.start,
            children: <Widget>[
              new Container(
                decoration: new BoxDecoration(color: Colors.green),
                child: new Text("item 2"),
              ),
              new Container(
                decoration: new BoxDecoration(color: Colors.teal),
                child: new Text("item 4"),
              )
            ],
          ),
        )
      ],
    ),
  )
7
Raouf Rahiche

ネストされた行と列が少し乱雑になり、はるかにインデントされる可能性があるため、一貫性と使いやすさのためにテーブルウィジェットを使用することをお勧めします。

https://docs.flutter.io/flutter/widgets/Table-class.html

   ...
Table(children: [
  TableRow(children: [
    Text("item 1"),
    Text("item 2"),
  ]),
  TableRow(children:[
    Text("item 3"),
    Text("item 4"),
  ]),
]);
19
N. T.