StarAndroid

Appearance

线性布局 ​

线性布局类似Android原生中的LinearLayout。 row和column布局都有两根轴，主轴和交叉轴。 Row实现水平方向布局，主轴是水平轴，交叉轴是垂直轴 Column正好相反。

通过Expanded组件和其中的flex属性，可以控制平均分配Row或Column的空间

水平布局Row ​

垂直布局Column ​

非线性布局 ​

Stack帧布局 ​

类似Android中的FrameLayout

Flex弹性布局 ​

和CSS中的Flex布局类似

dart
body: Flex(
  direction: Axis.vertical,
  children: [
    
  ],
),

其中direction为必选参数，指定children中元素的排列方向 其实Row和Column都是继承自Flex，不过固定了direction的方向，而Flex则更加灵活。

流式布局Wrap ​

使用线性布局时，超出屏幕的部分会报溢出错误，但是流式布局会把超出的部分自动换行

混合布局 ​

单组件布局 ​

Container只能放一个子节点，是Flutter中的盒子模型 虽然它只能放置一个元素，但是它有一个核心属性decoration，我们经常用它来给制定的部件设置装饰，例如内外边距，圆角等等

dart
Container({
    super.key,
    this.alignment,
    this.padding,//内边距
    this.color,//颜色
    this.decoration,//装饰
    this.foregroundDecoration,
    double? width,
    double? height,
    BoxConstraints? constraints,
    this.margin,
    this.transform,
    this.transformAlignment,
    this.child,
    this.clipBehavior = Clip.none,
  })

可以结合行或列布局实现更复杂的效果 EdgeInsets可以用来指定内边距 image.png

内外边距 ​

使用Container组件可以实现将一组控件包裹，控制控件的内外边距

groovy
//使用Container包裹控件
Container(
  padding: const EdgeInsets.all(30),
  margin: const EdgeInsets.all(20),
  child：Text('content')
)

Container常用来设置内外边距、圆角等，例如如下设置。

groovy
Container(
    height: 300,
    padding: const EdgeInsets.all(20),
    margin: const EdgeInsets.symmetric(vertical: 30, horizontal: 30),
    decoration: const BoxDecoration(
      borderRadius: BorderRadius.all(Radius.circular(10)),
      color: Color.fromRGBO(25, 25, 25, 0.1),
    ),
    child: Column(···)
)

常见的decoration有BoxDecoration

SizeBox ​

SizeBox的定义十分简单，可以看到他就只有三个属性。比较常用的场景就是用来设置部件之间的间距。

dart
const SizedBox({ super.key, this.width, this.height, super.child });

例如一个Image部件和Text部件间希望间隔10dp的间距，那么可以这么设置

dart
Row(
    children: [
      Image.asset("assets/images/2.0x/app_icon.png",width: 40, height: 40),
      SizedBox(width: 10),
      Text("作者", style: TextStyle(fontSize: 16, color: Colors.black)),
    ],
  ),

Padding ​

当然除了使用SizeBox来设置部件间的间距，还有一个更纯粹的部件，Padding。它有以恶padding属性，可以更精细化的制定上下左右的间距

dart
  const Padding({
    super.key,
    required this.padding,
    super.child,
  });
dart
Row(
  children: [
    Image.asset("assets/images/2.0x/app_icon.png",
        width: 40, height: 40),
    Padding(padding: EdgeInsets.only(left: 10), 
            child: Text("作者", style: TextStyle(fontSize: 16, color: Colors.black)),),
  ],
),

ClipRRect ​

如果我们想给某个部件设置圆角，使用ClipRRect也可以实现，可以看到它有一个borderRadius属性，利用它来设置圆角，然后将我们的部件设置到child属性中即可

dart
const ClipRRect({
    super.key,
    this.borderRadius = BorderRadius.zero,
    this.clipper,
    this.clipBehavior = Clip.antiAlias,
    super.child,
  });

例如设置圆角图片就可以使用这种方法

dart
ClipRRect(
  borderRadius: BorderRadius.circular(20),
  child: Image.asset("assets/images/2.0x/app_icon.png",
      width: 40, height: 40),
),