面试题：Flutter中Expanded与Flexible的差异及场景应用

Question

阐述Flutter中Expanded和Flexible组件的区别，在什么业务场景下应该优先选择Expanded，什么场景下更适合使用Flexible？请结合具体的UI布局案例进行说明。

Answer 1

区别

1. Expanded：
   • 继承自Flexible，强制子组件占满剩余空间。如果多个Expanded组件在同一Flex布局中，它们会按照flex属性（默认为1）的比例来分配剩余空间。即使子组件本身所需空间小于分配空间，也会被拉伸至填满剩余空间。
2. Flexible：
   • 控制子组件在Flex布局中如何分配剩余空间。与Expanded不同，Flexible允许子组件根据自身的fit属性来决定是否拉伸以填满剩余空间。fit属性有两个值：FlexFit.tight（默认，类似Expanded，会拉伸填满剩余空间）和FlexFit.loose（子组件不会拉伸，只占用自身所需空间，剩余空间不占用）。

业务场景

1. 优先选择Expanded的场景：
   • 当需要子组件严格按照比例分配剩余空间并填满时，优先选择Expanded。例如，在一个水平布局中，有三个按钮，希望它们平分屏幕宽度。

   Row(
     children: [
       Expanded(
         child: ElevatedButton(
           onPressed: () {},
           child: Text('按钮1'),
         ),
       ),
       Expanded(
         child: ElevatedButton(
           onPressed: () {},
           child: Text('按钮2'),
         ),
       ),
       Expanded(
         child: ElevatedButton(
           onPressed: () {},
           child: Text('按钮3'),
         ),
       ),
     ],
   );
   

2. 更适合使用Flexible的场景：
   • 当希望子组件可以选择不拉伸，只占用自身所需空间时，使用Flexible。比如在一个水平布局中，左边是一个固定宽度的图标，右边是一段文本，文本不希望拉伸，只占用自身内容所需空间。

   Row(
     children: [
       Icon(Icons.home),
       Flexible(
         fit: FlexFit.loose,
         child: Text('这是一段文本'),
       ),
     ],
   );
   

   • 或者在一个垂直布局中，有一个标题和一个内容区域，标题高度固定，内容区域希望在剩余空间内自适应，不拉伸填满剩余空间。

   Column(
     children: [
       Text('标题', style: TextStyle(fontSize: 20)),
       Flexible(
         fit: FlexFit.loose,
         child: Text('这是内容区域的文本，不需要拉伸填满剩余空间'),
       ),
     ],
   );