当前位置:   article > 正文

Flutter 开发 子组件Container宽高设置无效,总是撑满父组件_flutter center标签会撑开容器

flutter center标签会撑开容器

        萌新flutter开发,前端开发的思想还是不能彻底改变,一些flutter特有的编程思想正在慢慢适应。

        最近在开发过程中,父组件A包裹着子组件B,但是子组件的宽高不管怎么设置都是无效,始终撑满A。

        代码如下:

  1. import 'package:flutter/material.dart';
  2. class TestPage extends StatefulWidget {
  3. const TestPage({
  4. Key? key,
  5. }) : super(key: key);
  6. @override
  7. State<TestPage> createState() => _TestPageState();
  8. }
  9. class _TestPageState extends State<TestPage> {
  10. void initState() {
  11. super.initState();
  12. }
  13. Widget build(BuildContext context) {
  14. return Scaffold(
  15. body: Container(
  16. width: 300,
  17. height: 300,
  18. color: Colors.amber,
  19. child: Container(
  20. width: 150,
  21. height: 150,
  22. color: Colors.black,
  23. ),
  24. ),
  25. );
  26. }
  27. }

效果如下:

预期应该是A(一个大的黄色)包裹着B(一个小的黑色)。 

        经过查询学习,需要设置对齐方式(即确定位置)才能正常显示子组件B,不然会始终以最大的宽高显示。在A组件Container中设置

alignment: Alignment.center,

得到了预期效果。 

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

闽ICP备14008679号