flutter的Flexible和 Expanded的区别
程序员文章站
2024-03-11 15:39:07
...
题记
—— 执剑天涯,从你的点滴积累开始,所及之处,必精益求精,即是折腾每一天。
重要消息
- flutter中网络请求dio使用分析 ****在这里
- Flutter 从入门实践到开发一个APP之UI基础篇 视频
- Flutter 从入门实践到开发一个APP之开发实战基础篇
- flutter跨平台开发一点一滴分析系列文章系列文章 在这里了
Expanded继承于Flexible,Flexible与Expanded的相同点是都必须使用在Row、Column、Flex其中,都可用来配置子布局的比例(权重)适配。
不同之处是Expanded会强制填充剩余留白空间,而Flexible不会强制填充。如下图所示。
核心代码如下:
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
class FlexMain2Page extends StatefulWidget {
@override
_MyHomePageState createState() => _MyHomePageState();
}
/// Flexible和 Expanded的区别
class _MyHomePageState extends State {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text("布局 "),
),
body: Row(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
///区域一的内容
Container(
padding: EdgeInsets.all(10),
child: Text("文本二"),
color: Colors.grey[300],
),
///区域二的内容
Flexible(
flex: 1,
child: Container(
width: 120,
padding: EdgeInsets.all(10),
child: Text("严于律己,精于行动,点滴积累,着眼未来,你也许不负青春"),
color: Colors.grey[500],
),
),
],
),
);
}
}
完毕