Flutter 宽高比（比率）控件

原创于 2018-05-07 22:52:12 发布 · 1.3w 阅读

1 ·

本内容遵循CC 4.0 BY-SA版权协议

Flutter控件学习专栏收录该内容

8 篇文章

订阅专栏

本文介绍了一个使用Flutter框架创建的应用布局示例。通过MaterialApp组件设置应用标题为'Demo'，并在Scaffold中定义了带有AppBar的基本页面结构。主体部分采用Center组件居中显示，并使用Container包装了一个AspectRatio组件来保持图片的纵横比，最终展示一张来自项目资源文件的图片。

这里写图片描述

void main() {
  runApp(
    new MaterialApp(
      title: 'Demo',
      home: new Scaffold(
        appBar: new AppBar(
          title: new Text('Demo'),
        ),
        body: new Center(
          child: new Container(
//            color: Colors.red,
            child: new AspectRatio(
              aspectRatio:3/2, //横纵比 长宽比  3:2
              child: new Image(image: new AssetImage('images/img1.jpg')),//项目资源文件
            ),
          ),
        ),
      ),
    ),
  );
}