Flutter 布局控件

sglin123

已于 2024-06-19 00:21:29 修改

阅读量150

点赞数 2

文章标签： flutter

于 2024-06-13 22:39:43 首次发布

本文链接：https://blog.csdn.net/sglin123/article/details/139641370

版权

b. shadows:文字阴影【list】

c. 文字装饰线

d. 文字对齐方式

1. Container容器组件

用于容器单个子组件的容器组件，集成了若干个单子组件的功能，如内边距、形变、装饰、约束等

a. 可用于显示指定宽高的区域

Alignment 对齐方式

import 'package:flutter/material.dart';

class CustomContainer extends StatelessWidget {
   const CustomContainer({Key?key}): super(key: key);
   @override
   Widget build (BuildContext context){
     return Container(
       alignment: Alignment.topLeft,  // 对齐方式
       width: 100,
       height: 200 *0.6,
       color: Colors.red.withAlpha(80),
     );
   }
}

b. 可在区域中放一个子组件

padding 内边距

margin 外边距

Container(
          alignment: Alignment.topLeft,
          padding: const EdgeInsets.all(40),
          margin: const EdgeInsets.all(10),
          width: 300,
          height: 300 *0.6,
          color: Colors.red.withAlpha(80),
          child: const Icon(Icons.android， color: Colors.green)
        )

c. 可对子控件对齐定位

alignment: Alignment.topLeft, // 对齐方式

d. 可对子控件进行装饰

decoration: BoxDecoration(
              gradient: LinearGradient(
                  stops: stops, 
                  colors: rainbow.map((e) => Color(e)).toList()),//颜色
              borderRadius: const BorderRadius.only(
                  topLeft: Radius.circular(50),
                  bottomRight: Radius.circular(50)),//圆角
              boxShadow: const [ 
                BoxShadow(
                    color: Colors.grey,
                    offset: Offset(10, 10),
                    blurRadius: 10,
                    spreadRadius: 10)
              ] //阴影
),

import 'package:flutter/material.dart';

class CustomContainer extends StatelessWidget {
  CustomContainer({Key? key}) : super(key: key);
  final List<int> rainbow = [
    0xffff0000,
    0xffFF7F00,
    0xffFF7F00,
    0xffFFFF00,
    0xff00FF00,
    0xff0000FF,
    0xff8B00FF
  ];
  final List<double> stops = [0.0, 1 / 6, 2 / 6, 3 / 6, 4 / 6, 5 / 6, 1.0];

  @override
  Widget build(BuildContext context) {
    return Container(
      alignment: Alignment.center,
      padding: const EdgeInsets.all(40),
      margin: const EdgeInsets.all(10),
      width: 300,
      height: 300 * 0.6,
      decoration: BoxDecoration(
          gradient: LinearGradient(
              stops: stops, colors: rainbow.map((e) => Color(e)).toList()),
          borderRadius: const BorderRadius.only(
              topLeft: Radius.circular(50), bottomRight: Radius.circular(50)),
          boxShadow: const [
            BoxShadow(
                color: Colors.grey,
                offset: Offset(10, 10),
                blurRadius: 10,
                spreadRadius: 10)
          ]),
      child: const Text(
        "container",
        style: TextStyle(fontSize: 20),
      ),
    );
  }
}

e. 变换性

变换矩阵
transform: Matrix4.skew(-pi/20, 0),

f. 约束性

约束该区域的尺寸，不会小于指定的最小宽高，也不会大于指定的宽高。

constraints: const BoxConstraints(
  minWidth: 100,
  maxWidth: 150,
  minHeight: 20,
  maxHeight: 100,
)

2. Text文字组件

a. 文字的基本样式

fontStyle: 字体样式，

letterSpacing：字距

b. shadows:文字阴影【list<shadow>】

 TextStyle textStyle = const TextStyle(
        color: Colors.red,
        fontSize: 20,
        fontWeight: FontWeight.normal,
        fontStyle: FontStyle.normal,
        letterSpacing: 10,
        shadows: [Shadow(color: Colors.blue, blurRadius: 10, offset: Offset(1,     1)), Shadow(color: Colors.red, blurRadius: 10, offset: Offset(-1, -1))]
    );

c. 文字装饰线

fontFamily: 文字字体【String】

decortation: 装饰线【TextDecoration】

decortation:装饰线颜色【Color】

decorationThinckness: 装饰线粗【double】

decorationStyle:装饰线样式【TexDecorationStyle】

    TextStyle textStyle =  TextStyle(
        color: Colors.black,
        fontSize: 20,
        fontWeight: FontWeight.normal,
        fontStyle: FontStyle.normal,
        decorationThickness: 2,
        decoration: TextDecoration.underline,
        decorationStyle: TextDecorationStyle.solid,
        decorationColor: Colors.blue,
        fontFamily: "test",
        letterSpacing: 10,
        shadows: [Shadow(color: Colors.blue, blurRadius: 10, offset: Offset(1, 1)), Shadow(color: Colors.red, blurRadius: 10, offset: Offset(-1, -1))]
    );

d. 文字对齐方式

textAlign: 对齐方式

letf, right , center, justify, start, end

maxLines 最大行数

textDirection 文字方向 rtl , ltr

softwrap 是否换行

overflow 越界效果 clip, fade ellipsis , visible

import 'package:flutter/material.dart';

class TextAligntext extends StatelessWidget {
  const TextAligntext({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Wrap(
        spacing: 10,
        runSpacing: 10,
        children: TextAlign.values
            .map((TextAlign textAlign) => Container(
                  width: 100,
                  height: 120,
                  color: Colors.cyanAccent.withAlpha(33),
                  alignment: Alignment.center,
                  child: const Text(
                    "hello world hello world hello world",
                    textAlign: TextAlign.left,
                    softWrap: false,
                    overflow: TextOverflow.ellipsis,
                  ),
                ))
            .toList());
  }
}

3. 手势监听器

可以接受点击，长按，双击，按下，松开，移动等事件。

onTap: 点击

onDoubleTap:双击

onLongPress: 长按

onTapDown: 按下回调

onTapUp: 点击抬起回调

onTapCancel：点击取消

onPanDown: 按下

onPanEnd：拖动结束

等

import 'package:flutter/material.dart';

class CustomGestureDetector extends StatefulWidget {
  const CustomGestureDetector({Key? key}) : super(key: key);

  @override
  _CustomGestureDetectorState createState() => _CustomGestureDetectorState();
}

class _CustomGestureDetectorState extends State<CustomGestureDetector> {
  String _infos = "test";
  @override
  Widget build(BuildContext context) {
    return GestureDetector(
      onTap: () => setState(() =>_infos = 'onTap'),
      onDoubleTap: () => setState(() =>_infos = 'onDoubleTap'),
      onLongPress: () => setState(() =>_infos = 'onLongPress'),
      child: Container(
        alignment: Alignment.center,
        width: 300,
        height: 200,
        color: Colors.grey.withAlpha(30),
        child: Text(_infos, style: const TextStyle(fontSize: 20, color: Colors.blue),),
      ),
    );
  }
}