Flutter学习笔记（六）布局

1. 线性布局 Row,Column

body: Row(
  children: const <Widget>[Text("test"), Text("data"), Text("T3")],
)

 

body:Column(
    children: const <Widget>[Text("test"), Text("data"), Text("T3")],
)

 

2.弹性布局Flex

body: Flex(
  direction: Axis.vertical,
  children: const <Widget>[Text("test"), Text("data3"), Text("T3")],
)

 3.布局补充：

以上两种布局的使用，需要配合Expanded和Flexible使用

Expanded:会占满剩余所有空间大小

Flexible:不会占满剩余所有空间大小

Column(
  children: const <Widget>[
    Expanded(
      child: Text(
        "test",
        style: TextStyle(backgroundColor: Color.fromARGB(255, 0, 0, 255)),
      ),
    ),
    Flexible(
      child: Text(
        "data3",
        style: TextStyle(backgroundColor: Color.fromARGB(255, 255, 0, 0)),
      ),
    ),
    Expanded(
        child: Text(
      "T3",
      style: TextStyle(backgroundColor: Color.fromARGB(255, 0, 255, 0)),
    ))
  ],
)

 

body: Flex(
  direction: Axis.vertical,
  children: const <Widget>[
    Expanded(
      child: Text("test"),
      flex: 1,
    ),
    Flexible(
      child: Text("data3"),
      flex: 2,
    ),
    Text("T3")
  ],
)

 4.流式布局 Wrap，Flow

把超出屏幕显示范围会自动折行的布局称为流式布局。Row 只占一行，不会自动换行

body: Wrap(
  children: const <Widget>[
    Text(
      "testfasefjeosiafioesafiohesiofahkldsahfia;sioe;hafsioe;hafsioea';sgh'easwfheoasiffjeaosifjeosi",
      style: TextStyle(backgroundColor: Color.fromARGB(255, 0, 0, 255)),
    ),
    Text(
      "data3",
      style: TextStyle(backgroundColor: Color.fromARGB(255, 255, 0, 0)),
    ),
    Text(
      "T3",
      style: TextStyle(backgroundColor: Color.fromARGB(255, 0, 255, 0)),
    )
  ],
)

 5.层叠布局Stack

body: Stack(
  children: const <Widget>[
    Text(
      "testfasefjeosiafioesafiohesiofahkldsahfia;sioe;hafsioe;hafsioea';sgh'easwfheoasiffjeaosifjeosi",
      style: TextStyle(backgroundColor: Color.fromARGB(255, 0, 0, 255)),
    ),
    Text(
      "data3",
      style: TextStyle(backgroundColor: Color.fromARGB(255, 255, 0, 0)),
    ),
    Text(
      "T3",
      style: TextStyle(backgroundColor: Color.fromARGB(255, 0, 255, 0)),
    )
  ],
),

 6.对齐布局Center,Align

Center(
    child: Stack(
  children: const <Widget>[
    Text(
      "testfasefjeosiafioesafiohesiofahkldsahfia;sioe;hafsioe;hafsioea';sgh'easwfheoasiffjeaosifjeosi",
      style: TextStyle(backgroundColor: Color.fromARGB(255, 0, 0, 255)),
    ),
    Text(
      "data3",
      style: TextStyle(backgroundColor: Color.fromARGB(255, 255, 0, 0)),
    ),
    Text(
      "T3",
      style: TextStyle(backgroundColor: Color.fromARGB(255, 0, 255, 0)),
    )
  ],
))

body: Align(
    alignment: Alignment.bottomCenter,
    child: Stack(
  children: const <Widget>[
    Text(
    "testfasefjosi",
    style: TextStyle(backgroundColor: Color.fromARGB(255, 0, 255, 255)),
  ),
  Text(
    "data3",
    style: TextStyle(backgroundColor: Color.fromARGB(255, 255, 0, 0)),
  ),
  Text(
    "T3",
    style: TextStyle(backgroundColor: Color.fromARGB(255, 0, 255, 0)),
  )
  ],
))