fluter控件之SizeBox和AspectRatio

SizeBox和AspectRatio的区别是:

SizeBox强制控制子控件具有特定的宽度、高度或者两者都有。

AspectRatio强制子控件的宽度和高度具有给定的宽高比。

SizeBox的用法:

import 'package:flutter/material.dart';
class SizeboxDemo extends StatelessWidget{
  @override
  Widget build(BuildContext context) {
    return new Scaffold(
      appBar: new AppBar(
        title: new Text("强制子控件的长宽高"),
      ),
      body: new SizedBox(
        width: 350.0,
        height: 350.0,
        child: new Container(
          decoration: new BoxDecoration(
            color: Colors.deepOrange
          ),
        ),
      ),
    );
  }
}
void main(){
  runApp(new MaterialApp(
    title: "强制控制子控件的长宽高",
    home: new SizeboxDemo(),
  ));
}

效果: 

 

 fluter控件之SizeBox和AspectRatio_第1张图片

 AspectRatio的用法:

import 'package:flutter/material.dart';
class AspecrratioDemo extends StatelessWidget{
  @override
  Widget build(BuildContext context) {
    return new Scaffold(
      appBar: new AppBar(
        title: new Text("强制设置子控件的长宽比"),
      ),
      body: new AspectRatio(
          aspectRatio: 3.0/1.0,
        child: new Container(
          decoration: new BoxDecoration(
            color: Colors.yellow
          ),
        ),
      ),
    );
  }
}
void main(){
  runApp(new MaterialApp(
    title: "强制设置子控件长宽比",
    home: new AspecrratioDemo(),
  ));
}

 fluter控件之SizeBox和AspectRatio_第2张图片

你可能感兴趣的:(flutter)