import 'package:flutter/material.dart';
main() => runApp(KSJMyApp());
class KSJMyAppextends StatelessWidget {
@override
Widgetbuild(BuildContext context) {
return MaterialApp(
home:MyApp(),
);
}
}
class MyAppextends StatelessWidget {
@override
Widgetbuild(BuildContext context) {
return Scaffold(
appBar:AppBar(
title:Text('KSJ'),
),
body:KSJHomeContent(),
floatingActionButton:FloatingActionButton(child:Icon(Icons.add), onPressed: (){
print("+++");
}),
floatingActionButtonLocation: FloatingActionButtonLocation.centerFloat,
);
}
}
// 3.Expanded
/*
* Flexible中的属性
* -flex
* Expanded -> Flexible(fit: FlexFit.tight)——使用最多：关系Flexible 和 Expanded
* 空间分配问题
* Flexible: 开发中很少使用这个Widget
*
* */
class KSJHomeContentextends StatelessWidget {
@override
Widgetbuild(BuildContext context) {
return Container(
height:300,
child:Row(
// 固比模型的使用:必须设置 fit: FlexFit.tight,才可以使用
mainAxisAlignment: MainAxisAlignment.start,
crossAxisAlignment: CrossAxisAlignment.center,
mainAxisSize: MainAxisSize.max,
textBaseline: TextBaseline.ideographic,
children: [
Expanded(
flex:1,
child:Container(
width:1000,
height:60,
color: Colors.red,
child:Text('KSJ你好1'),
)),
Expanded(
flex:2,
child:Container(
width:200,
height:60,
color: Colors.green,
child:Text('KSJ你好2'),
),
),
Expanded(
flex:3,
child:Container(
width:30000,
height:60,
color: Colors.blue,
child:Text('KSJ你好3'),
),
)
],
),
);
}
}
备注：同微信小程序的固比模型
网友评论