Flutter——Expanded組件（"可伸縮"組件）

Expanded組件可以結合Row和Column布局組件使用。

• Expanded組件的常用屬性

屬性	說明
flex	元素占整個父Row/Column的比例
child	子元素

 

 

import 'package:flutter/material.dart';

void main() {
  runApp(MaterialApp(
    title: "ExpandedWidget",
    home: MyApp(),
  ));
}


class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Row(
          mainAxisAlignment: MainAxisAlignment.start,
          children: <Widget>[
            Container(
              color: Colors.orange,
              width: 80,
              height: 80,
            ),
            Expanded(
              flex: 1,
              child: Container(
                color: Colors.redAccent,
                width: 80,
                height: 80,
              ),
            ),
            Expanded(
              flex: 2,
              child: Container(
                color: Colors.teal,
                width: 80,
                height: 80,
              ),
            )
          ],
        ),
    );
  }
}