当前位置:   article > 正文

Flutter Row 横向排列、水平排列_flutter里横向竖向排列用啥

flutter里横向竖向排列用啥

参数详解

属性说明
mainAxisAlignment

主轴的排序方式

MainAxisAlignment.start

MainAxisAlignment.end

MainAxisAlignment.center

MainAxisAlignment.spaceBetween : 间距相同  首尾没有间距

MainAxisAlignment.spaceAround : 子元素平均充满

MainAxisAlignment.spaceEvenly : 间距相同 首尾有间距

crossAxisAlignment

次轴的排序方式

CrossAxisAlignment.start

CrossAxisAlignment.end

CrossAxisAlignment.center

CrossAxisAlignment.stretch  : 子元素宽充满

CrossAxisAlignment.baseline

mainAxisSize默认MainAxisSize.max
textDirection

正反排序

TextDirection.ltr

TextDirection.rtl

verticalDirection默认VerticalDirection.down
textBaseline官方:如果根据基线对齐项目,则使用哪个基线。
children子元素

代码示例

  1. class MyBody extends StatelessWidget {
  2. @override
  3. Widget build(BuildContext context) {
  4. return Container(
  5. color: Colors.red,
  6. // width: 400,
  7. height: 400,
  8. child:Row(
  9. children: <Widget>[
  10. MyImage('https://raw.githubusercontent.com/think-ing/flutter_demo/master/images/a.jpg'),
  11. MyImage('https://raw.githubusercontent.com/think-ing/flutter_demo/master/images/b.jpg'),
  12. MyImage('https://raw.githubusercontent.com/think-ing/flutter_demo/master/images/c.jpg'),
  13. Text('abcdefg'),
  14. Text('cdefg'),
  15. Text('bcdefg'),
  16. Text('你好'),
  17. ],
  18. )
  19. );
  20. }
  21. }
  22. //定义一个 公共类
  23. class MyImage extends StatelessWidget {
  24. String imgUrl;
  25. MyImage(this.imgUrl);
  26. @override
  27. Widget build(BuildContext context) {
  28. return Container(
  29. height: 100,
  30. width: 100,
  31. child: Image.network(this.imgUrl,fit: BoxFit.cover,),
  32. );
  33. }
  34. }

 效果图

 

声明:本文内容由网友自发贡献,不代表【wpsshop博客】立场,版权归原作者所有,本站不承担相应法律责任。如您发现有侵权的内容,请联系我们。转载请注明出处:https://www.wpsshop.cn/w/2023面试高手/article/detail/289787
推荐阅读
相关标签
  

闽ICP备14008679号