Flutter基础（定位）- 八

最新推荐文章于 2025-03-10 20:17:24 发布

IT_Nice

最新推荐文章于 2025-03-10 20:17:24 发布

阅读量1.3k

点赞数

Flutter 专栏收录该内容

13 篇文章

订阅专栏

本文详细介绍了Flutter中常用的布局控件，包括Center用于中心定位，Align实现精确对齐，Padding提供填充效果，SizedBox设定固定尺寸，以及AspectRatio保持宽高比。这些控件是构建美观、响应式UI的基础。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

Center - 中心定位控件，能够将子控件放在其内部中心

class LayoutDemo extends StatelessWidget{
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return new Scaffold(
      appBar: new AppBar(
        title: new Text("定位_中心"),
      ),
      body: new Center(
        child: new Text("在屏幕中心"),
      ),
    );
  }
}

上述代码中，Center的子控件Text在屏幕的中心

Align - 对齐控件，能将子控件所指定方式对齐，并根据子控件的大小调整自己的大小

bottomCenter    (0.5, 1.0)    底部中心
bottomLeft    (0.0, 1.0)    左下角
bottomRight    (1.0, 1.0)    右下角
center    (0.5, 0.5)    水平垂直居中
centerLeft    (0.0, 0.5)    左边缘中心
centerRight    (1.0, 0.5)    右边缘中心
topCenter    (0.5, 0.0)    顶部中心
topLeft    (0.0, 0.0)    左上角
topRight    (1.0, 0.0)    右上角

class LayoutDemo extends StatelessWidget{
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return new Scaffold(
      appBar: new AppBar(
        title: new Text("定位_对齐"),
      ),
      body: new Stack(
        children: <Widget>[
          new Align(
            alignment: new FractionalOffset(0.0, 0.0),
            child: new Text("左上角"),
          ),
          new Align(
            alignment: FractionalOffset.bottomRight,
            child: new Text("右下角"),
          )
        ],
      ),
    );
  }
}

alignment:可以设置对应的值，也可以设置定义好的位置属性；

Padding - 填充控件，能给子控件插入给定的填充

class LayoutDemo extends StatelessWidget{
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return new Scaffold(
      appBar: new AppBar(
        title: new Text("定位_填充"),
      ),
      body:new Padding(padding: const EdgeInsets.all(30.0),
        child: new Text("全部填充30"),
      ) ,
    );
  }
}

SizedBox - 强制子控件具有特定宽度、高度或者两者都有

class LayoutDemo extends StatelessWidget{
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return new Scaffold(
      appBar: new AppBar(
        title: new Text("定位_填充"),
      ),
      body:new SizedBox(
          width: 100.0,
          height: 100.0,
          child: new Container(
            child: new Text("SizedBox"),
            decoration: new BoxDecoration(
              color: Colors.lightBlueAccent[100],
            ),
          ),
      )
    );
  }
}

AspectRatio - 强制子控件的宽高具有给定的宽高比

class LayoutDemo extends StatelessWidget{
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return new Scaffold(
      appBar: new AppBar(
        title: new Text("定位_比例"),
      ),
      body:new AspectRatio(
          aspectRatio: 3.0/2.0,
        child: new Container(
          child: new Text("强制比例"),
          decoration: new BoxDecoration(
            color: Colors.lightBlueAccent
          ),
        ),
      )
    );
  }
}

宽高比三比二