Flutter——布局技巧

95 阅读1分钟

1.container 宽度跟随父组件 给container 添加一个属性 alignment:Alignment.centerLeft

2.Text 自动换行 Column>Text Text就会自动换行,无须处理 Row>Colum>Text Text不会换行,需要在Row 第一个子节点,添加Expanded包裹

3.flutter container 透明度设置

Container( 
    decoration: BoxDecoration( color: Colors.blue.withOpacity(0.5), ),   
    child: Text('Hello World'), 
);

4.Column 元素垂直居中 Column 添加一下属性 mainAxisAlignment: MainAxisAlignment.center

5.Flutter Text 去掉黄色下划线 decoration: TextDecoration.none

6.尽量使用 StatelessWidget 替代 StatefulWidget 使用Getx或StreamBuilder或Provider实现状态管理或界面的响应式更新,StatelessWidget 的维护成本比 StatefulWidget 要低,构建效率更高。同时更少的代码量会让我们更容易地控制重建范围,提高渲染效率。