題記
—— 執(zhí)劍天涯,從你的點(diǎn)滴積累開始,所及之處,必精益求精,即是折騰每一天。
重要消息
- flutter中網(wǎng)絡(luò)請(qǐng)求dio使用分析 視頻教程在這里
- Flutter 從入門實(shí)踐到開發(fā)一個(gè)APP之UI基礎(chǔ)篇 視頻
- Flutter 從入門實(shí)踐到開發(fā)一個(gè)APP之開發(fā)實(shí)戰(zhàn)基礎(chǔ)篇
- flutter跨平臺(tái)開發(fā)一點(diǎn)一滴分析系列文章系列文章 在這里了
Expanded繼承于Flexible,F(xiàn)lexible與Expanded的相同點(diǎn)是都必須使用在Row、Column、Flex其中,都可用來配置子布局的比例(權(quán)重)適配。
不同之處是Expanded會(huì)強(qiáng)制填充剩余留白空間,而Flexible不會(huì)強(qiáng)制填充。如下圖所示。
在這里插入圖片描述
核心代碼如下:
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
class FlexMain2Page extends StatefulWidget {
@override
_MyHomePageState createState() => _MyHomePageState();
}
/// Flexible和 Expanded的區(qū)別
class _MyHomePageState extends State {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text("布局 "),
),
body: Row(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
///區(qū)域一的內(nèi)容
Container(
padding: EdgeInsets.all(10),
child: Text("文本二"),
color: Colors.grey[300],
),
///區(qū)域二的內(nèi)容
Flexible(
flex: 1,
child: Container(
width: 120,
padding: EdgeInsets.all(10),
child: Text("嚴(yán)于律己,精于行動(dòng),點(diǎn)滴積累,著眼未來,你也許不負(fù)青春"),
color: Colors.grey[500],
),
),
],
),
);
}
}
完畢