Khoảng trống giữa các con của Column trong Flutter

Tôi có một Columnwidget với hai TextFieldwidget khi còn nhỏ và tôi muốn có một khoảng trống giữa cả hai.

Tôi đã thử rồi mainAxisAlignment: MainAxisAlignment.spaceAround, nhưng kết quả không như ý muốn.

Bạn có thể sử dụng Paddingwidget ở giữa hai widget đó hoặc bọc các widget đó bằng Paddingwidget.

Cập nhật

Tiện ích SizedBox có thể được sử dụng ở giữa hai tiện ích để thêm không gian giữa hai tiện ích và nó làm cho mã dễ đọc hơn tiện ích đệm.

Ví dụ:

Column(
  children: <Widget>[
    Widget1(),
    SizedBox(height: 10),
    Widget2(),
  ],
),

Bạn có thể đặt một SizedBoxvới một cụ thể heightgiữa các widget, như sau:

Column(
  children: <Widget>[
    FirstWidget(),
    SizedBox(height: 100),
    SecondWidget(),
  ],
),

Tại sao lại thích điều này hơn là bao bọc các vật dụng Padding? Khả năng đọc! Có ít bảng soạn sẵn trực quan hơn, ít thụt lề hơn và mã tuân theo thứ tự đọc điển hình.

Wrap()thay vào đó bạn có thể sử dụng widget Column()để thêm khoảng cách giữa các widget con. và sử dụng thuộc tính khoảng cách để tạo khoảng cách bằng nhau giữa các widget con.

Wrap(
  spacing: 20, // to apply margin in the main axis of the wrap
  runSpacing: 20, // to apply margin in the cross axis of the wrap
  children: <Widget>[
     Text('child 1'),
     Text('child 2')
  ]
)

Chỉ cần sử dụng đệm để bọc nó như thế này:

Column(
  children: <Widget>[
  Padding(
    padding: EdgeInsets.all(8.0),
    child: Text('Hello World!'),
  ),
  Padding(
    padding: EdgeInsets.all(8.0),
    child: Text('Hello World2!'),
  )
]);

Bạn cũng có thể sử dụng Container (đệm ...) hoặc SizeBox (chiều cao: xx). Cái cuối cùng là phổ biến nhất nhưng nó sẽ mô tả cách bạn muốn quản lý không gian của các widget của mình, tôi thích sử dụng padding nếu không gian thực sự là một phần của widget và sử dụng sizebox cho danh sách chẳng hạn.

Có nhiều cách để làm điều đó, tôi liệt kê một vài cách ở đây.

1. Sử dụng Containervà cung cấp một số chiều cao:

   Column(
     children: <Widget>[
       Widget1(),
       Container(height: 10), // set height
       Widget2(),
     ],
   )
   

2. Sử dụng Spacer

   Column(
     children: <Widget>[
       Widget1(),
       Spacer(), // use Spacer
       Widget2(),
     ],
   )
   

3. Sử dụng Expanded

   Column(
     children: <Widget>[
       Widget1(),
       Expanded(child: SizedBox()), // use Expanded
       Widget2(),
     ],
   )
   

4. Sử dụng mainAxisAlignment

   Column(
     mainAxisAlignment: MainAxisAlignment.spaceAround, // mainAxisAlignment
     children: <Widget>[
       Widget1(),
       Widget2(),
     ],
   )
   

5. Sử dụng Wrap

   Wrap(
     direction: Axis.vertical, // make sure to set this
     spacing: 20, // set your spacing
     children: <Widget>[
       Widget1(),
       Widget2(),
     ],
   )
   

Column(
  children: <Widget>[
    FirstWidget(),
    Spacer(),
    SecondWidget(),
  ]
)

Spacer tạo không gian linh hoạt để chèn vào tiện ích con [Linh hoạt]. (Như một chuyên mục)

Giống như cách SizedBox được sử dụng ở trên với mục đích dễ đọc mã, bạn có thể sử dụng tiện ích Padding theo cách tương tự và không cần phải đặt nó trở thành tiện ích cha cho bất kỳ phần tử con nào của Cột

Column(
  children: <Widget>[
    FirstWidget(),
    Padding(padding: EdgeInsets.only(top: 40.0)),
    SecondWidget(),
  ]
)

Bạn có thể giải quyết vấn đề này theo cách khác nhau.

Nếu bạn sử dụng Row / Column thì bạn phải sử dụng mainAxisAlignment: MainAxisAlignment.spaceEvenly

Nếu bạn sử dụng Wrap Widget, bạn phải sử dụng runSpacing: 5, spacing: 10,

Ở bất cứ đâu bạn có thể sử dụng SizeBox ()

Cột Không có chiều cao theo mặc định, Bạn có thể Bọc Cột của mình vào Vùng chứa và thêm chiều cao cụ thể vào Vùng chứa của bạn. Sau đó, bạn có thể sử dụng một cái gì đó như dưới đây:

Container(
   width: double.infinity,//Your desire Width
   height: height,//Your desire Height
   child: Column(
      mainAxisAlignment: MainAxisAlignment.spaceBetween,
      children: <Widget>[
         Text('One'),
         Text('Two')
      ],
   ),
),

Có rất nhiều câu trả lời ở đây nhưng tôi sẽ đưa ra đây câu trả lời quan trọng nhất mà mọi người nên sử dụng.

1. Cột

 Column(
          children: <Widget>[
            Text('Widget A'), //Can be any widget
            SizedBox(height: 20,), //height is space betweeen your top and bottom widget
            Text('Widget B'), //Can be any widget
          ],
        ),

2. Bọc

     Wrap(
          direction: Axis.vertical, // We have to declare Axis.vertical, otherwise by default widget are drawn in horizontal order
            spacing: 20, // Add spacing one time which is same for all other widgets in the children list
            children: <Widget>[
              Text('Widget A'), // Can be any widget
              Text('Widget B'), // Can be any widget
            ]
        )

Column(children: <Widget>[
   Container(margin: EdgeInsets.only(top:12, child: yourWidget)),
   Container(margin: EdgeInsets.only(top:12, child: yourWidget))
]);

Bạn có thể phải sử dụng tiện ích con SizedBox () giữa các cột con của bạn. Hy vọng điều đó sẽ hữu ích

Hộp có kích thước sẽ không giúp ích gì trong trường hợp, điện thoại đang ở chế độ nằm ngang.

body: Column(
      mainAxisAlignment: MainAxisAlignment.spaceBetween,
      crossAxisAlignment: CrossAxisAlignment.stretch,
      children: <Widget>[
        Expanded(
           child: Container(
            margin: EdgeInsets.all(15.0),
            decoration: BoxDecoration(
              color: Color(0xFF1D1E33),
              borderRadius: BorderRadius.circular(10.0),
            ),
          ),
        ),
        Expanded(
           child: Container(
            margin: EdgeInsets.all(15.0),
            decoration: BoxDecoration(
              color: Color(0xFF1D1E33),
              borderRadius: BorderRadius.circular(10.0),
            ),
          ),
        ),
        Expanded(
           child: Container(
            margin: EdgeInsets.all(15.0),
            decoration: BoxDecoration(
              color: Color(0xFF1D1E33),
              borderRadius: BorderRadius.circular(10.0),
            ),
          ),
        ),
      ],
     )