【Flutter】篇2:Basic Flutter layout concepts

LCQ_CG

已于 2022-09-16 09:30:39 修改

阅读量143

点赞数

分类专栏： flutter 文章标签： flutter android

于 2022-09-15 11:28:21 首次发布

本文链接：https://blog.csdn.net/LCQ_CG/article/details/126866429

版权

flutter 专栏收录该内容

18 篇文章 1 订阅

订阅专栏

Widget是UI的基础，几乎Flutter中的所有东西都是widget。widget是可以组合的，意味着你可以组合现有的widget来做一个更复杂的widget
Flutter中的问号的位置是:表示可空类型
Row和Column通过mainAxisAlignment和crossAxisAlignment属性可以决定他们在各自Axis中的相对位置

class MyWidget extends StatelessWidget {
  const MyWidget({super.key});

  @override
  Widget build(BuildContext context) {
    return Row(
      textDirection: TextDirection.ltr,
      mainAxisSize: MainAxisSize.max,
      mainAxisAlignment: MainAxisAlignment.spaceEvenly,
      crossAxisAlignment: CrossAxisAlignment.end,
      children: const [
        BlueBox(),
        BlueBox(),
        BlueBox(),
      ],
    );
  }
}

4.可以用flexible来包裹widget，这样widget的大小就是可变的了
有两个属性:fit和flex
我的理解：
fit是怎么用自己的空间，loose表示按需去用，tight表示拼命用光
flex表示自己有多大空间，属性值越大，份额就越大

Flexible(
          fit: FlexFit.loose,
          flex: 1,
          child:BlueBox(),
        ),
        Flexible(
          fit: FlexFit.tight,
          flex: 1,
          child:BlueBox(),
        ),

Expanded Box：强制元素占满extra space

Expanded(child: BlueBox()),
Expanded(child: BlueBox())

SizedBox:定制box的大小

SizedBox(
          width: 100,
          height: 100,
          child: BlueBox(),
        )

也可用来占空

BlueBox(),
SizedBox(width: 50),
BlueBox(),

Spacer widget可以创造元素间的空隙

BlueBox(),
Spacer(flex: 1),
BlueBox(),

Text Widget：能够包裹显示文字

Text(
          'Hey!',
          style: TextStyle(
            fontSize: 30,
            fontFamily: 'Futura',
            color: Colors.blue,
          ),
        ),

但是如果不加上textDirection: TextDirection.ltr,这个属性的话就会报

 No Directionality widget found

应该是：

Text(
          'Hey!',
          style: TextStyle(
          textDirection: TextDirection.ltr，
            fontSize: 30,
            fontFamily: 'Futura',
            color: Colors.blue,
          ),
        ),

Icon widget
跟图标相关，也需要添加上textDirection

Icon(
          textDirection: TextDirection.rtl,
          Icons.widgets,
          size: 50,
          color: Colors.blue,
        ),

Image widget
网络的图片这么用，通过看API官方文档得知

Image(
 image: NetworkImage('https://raw.githubusercontent.com/flutter/website/main/examples/layout/sizing/images/pic1.jpg'),
    )

但是可能会出现这个错误：

A RenderFlex overflowed by 67 pixels on the right.

意思是图片的右边超像素了，这个时候就要用Flexible给它包起来

Flexible(
            fit: FlexFit.tight,
            child: Image(
              image: NetworkImage('https://raw.githubusercontent.com/flutter/website/main/examples/layout/sizing/images/pic1.jpg'),
            ))