Flutter-定位_flutter 定位

Flutter组件之定位

##定位方式一：

可以在所需组件外层包裹一个Container，利用alignment: FractionalOffset(x, y)进行定位

例子

Container(
  padding: EdgeInsets.all(5.0),
  alignment: FractionalOffset(0.5, 0.8),
  decoration: BoxDecoration(
    gradient: LinearGradient(
      begin: Alignment.topCenter,
      end: Alignment.bottomCenter,
      colors: <Color>[
        Colors.red,
        Colors.orange,
        Colors.yellow
      ],
    ),
  ),
  child: Text(
    "Foreground Text",
    style: TextStyle(color: Colors.white, fontSize: 20.0),
  ),
),
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

##定位方式二：

利用 Positioned 组件进行定位

必选

1. child 	=> Widget  	所包含的组件（孩子）
1

可选

1. left 	=> double	左边距离
2. top 		=> double	顶部距离
3. right 	=> double	右边距离
4. bottom 	=> double	底部距离
5. width	=> double	宽度
6. height	=> double	高度
1
2
3
4
5
6

例子

Positioned(
	left: 20.0,
	top: 120.0,
	child: new Text("今天今天今天今天今天今天今天"),
),
1
2
3
4
5

##定位方式三：

利用 Center 组件进行居中定位

必选

1. child 	=> Widget  	所包含的组件（孩子）
1

可选

1. widthFactor		=> double		组件宽度为孩子宽度的N倍
2. heightFactor		=> double		组件高度为孩子高度的N倍
1
2

例子

//该组件的宽度为100.0，高度为200.0
Center(
  widthFactor: 1.0,
  heightFactor: 2.0,
  child: Container(
    width: 100.0,
    height: 100.0,
    color: Colors.lightGreenAccent,
  ),
),
1
2
3
4
5
6
7
8
9
10