Flutter - 基础Widget使用

最近又系统的学习完了一遍flutter，简单记录记录，感觉越敲越带劲。

基础组件

Text

 const Text(
    ///显示的内容
    String this.data, {
    Key? key,
    ///样式，即字体/大小等等
    this.style,
    /// 段落的间距样式
    this.strutStyle,
    ///文本对齐方式
    this.textAlign,
    /// 文字排列方向 ltr 左到右，rtl右到左
    this.textDirection,
    ///语言环境
    this.locale,
    ///是否自动换行
    this.softWrap,
    ///文字超出屏幕之后的处理方式 clip：剪切，ellipsis：省略号，fade：淡化透明
    this.overflow,
    /// 字体显示倍率
    this.textScaleFactor,
    ///最大行数
    this.maxLines,
    ///图像的语义描述，用于向Andoid上的TalkBack和iOS上的VoiceOver提供图像描述
    this.semanticsLabel,
    this.textWidthBasis,
    this.textHeightBehavior,
  })
const TextStyle({
    this.inherit = true,///是否使用父类的样式来替换空值
    this.color,///文本颜色
    this.backgroundColor,///背景颜色
    this.fontSize,///文本大小
    this.fontWeight,///字体， 加粗等
    this.fontStyle,///字体样式
    this.letterSpacing,///字间距
    this.wordSpacing,///字体间距
    this.textBaseline,///文本基线
    this.height,///指定行高
    this.leadingDistribution,
    this.locale,/// 语言环境
    this.foreground,///文本的前景色，不能与color共同设置
    this.background,///文本背景色
    this.shadows,///文字阴影
    this.fontFeatures,
    this.decoration,///给文本添加装饰物，删除线，下划线等
    this.decorationColor,///装饰物的颜色
    this.decorationStyle,///装饰物显示样式，虚线，波浪线等
    this.decorationThickness,
    this.debugLabel,
    String? fontFamily,///自定义字体的名字，搭配 package 属性使用。
    List<String>? fontFamilyFallback,
    String? package,///自定义字体的路径
  })

基本使用，属性很多，可以自己都试试

Text(
      "庆历四年春，滕子京谪守巴陵郡。越明年，政通人和，百废具兴，乃重修岳阳楼，增其旧制，刻唐贤今人诗赋于其上，属予作文以记之",
      textAlign: TextAlign.center,
      maxLines: 2,
      overflow: TextOverflow.ellipsis,
//      textScaleFactor: 1.5,
      style: TextStyle(
          fontSize: 20,
          color: Colors.red,
          fontWeight: FontWeight.bold
      ),
    );
  }

• 图文混排

Text.rich(
              TextSpan(
                  children: [
                    TextSpan(text: "111111111  11", style: TextStyle(color: Colors.red)),
                    TextSpan(text: "22222222 22", style: TextStyle(color: Colors.blueAccent)),
                    WidgetSpan(child: Icon(Icons.add_alarm, color: Colors.orange,)),
                    TextSpan(text: "333333 33", style: TextStyle(color: Colors.blue)),
                  ]
              )
          )

image.png

Button

Scaffold(
      appBar: AppBar(
        title: Text('test'),
      ),
      body: Center(
        child: Container(
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: [
              ElevatedButton(
                child: Text("ElevatedButton"),
                style: ButtonStyle(
                  foregroundColor:  MaterialStateProperty.all(Colors.blueAccent),
                  backgroundColor: MaterialStateProperty.all(Colors.deepOrangeAccent),
                  textStyle: MaterialStateProperty.all(TextStyle(
                    fontSize: 20
                  ))
                ),
                onPressed: () => print("ElevatedButton Click"),
              ),
              TextButton(
                child: Text("TextButton"),
                style: ButtonStyle(
                    foregroundColor:  MaterialStateProperty.all(Colors.orange),
                    textStyle: MaterialStateProperty.all(TextStyle(
                        fontSize: 20
                    ))
                ),
                onPressed: () => print("TextButton Click"),
              ),

              // 3.OutlineButton
              OutlinedButton(
                child: Text("OutlinedButton"),
                style: ButtonStyle(
                    foregroundColor:  MaterialStateProperty.all(Colors.red),
                    textStyle: MaterialStateProperty.all(TextStyle(
                        fontSize: 20
                    ))
                ),
                onPressed: () => print("OutlinedButton"),
              ),
              TextButton(
                child: Row(
                  mainAxisSize: MainAxisSize.min,
                  children: <Widget>[
                    Icon(Icons.favorite, color: Colors.red,),
                    Text("海贼·王路飞")
                  ],
                ),
                onPressed: () {},
              )
            ],
          )
        ),
      ),
      floatingActionButton: FloatingActionButton(
        child: Icon(Icons.add),
        onPressed: () => print("FloatingActionButton"),
      ),
    );

// 1.默认情况下Button上下有一定的间距
    // 2.Button变小: ButtonTheme
    // 3.取出Button的内边距
ButtonTheme(
            child: TextButton(
              child: Text("TextButton"),
              style: ButtonStyle(
                  padding: MaterialStateProperty.all(EdgeInsets.all(0)),
                  foregroundColor:  MaterialStateProperty.all(Colors.blueAccent),
                  backgroundColor: MaterialStateProperty.all(Colors.deepOrangeAccent),
                  textStyle: MaterialStateProperty.all(TextStyle(
                      fontSize: 20
                  ))
              ),
              onPressed: () => print("TextButton Click"),
            )
          )

image.png
buttontheme

图片

在pubspec.yaml中配置好

Image(
            color: Colors.green,///颜色, 和colorBlendMode配合使用
            colorBlendMode: BlendMode.colorDodge,
            image: NetworkImage('https://picsum.photos/id/237/200/300'),
            width: 200,///宽
            height: 200,///高
            fit: BoxFit.cover,///图片的拉伸和挤压，
            repeat: ImageRepeat.repeatY,///设置图片重复显示
            //alignment: Alignment.bottomCenter,///图片摆放的位置
            //    范围: -1 1
            alignment: Alignment(0, 0),
            )
BoxFit: 
contain：全图居中显示但不充满，显示原比例
cover:图片可能拉伸，也可能裁剪，但是充满容器
fill: 全图显示且填充满，图片可能会拉伸
fitHeight: 图片可能拉伸，可能裁剪，高度充满
fitWidth: 图片可能拉伸，可能裁剪，宽度充满
scaleDown: 缩小图片

Image.network('https://picsum.photos/id/237/200/300',width: double.infinity,height: 300,fit: BoxFit.cover,)

/// 加载本图片
Image.asset('assets/images/1.jpg')
/// FadeInImage 做占位
FadeInImage(
             ///淡出 时间
            fadeOutDuration: Duration(milliseconds: 1),
            /// 淡入 时间
            fadeInDuration: Duration(milliseconds: 1),
            placeholder: AssetImage("assets/images/1.jpg"),
            image: NetworkImage('https://picsum.photos/id/237/200/300'),
            )

image.png

Icon

Icon(Icons.alarm, size: 300, color: Colors.orange,);
Icon(IconData(0xe072, fontFamily: 'MaterialIcons'), size: 300, color: Colors.orange,)

TextField

final usernameTextEditController = TextEditingController();

TextField(
              controller: usernameTextEditController,
              /// TextField的外观以及提示信息等
              decoration: InputDecoration(
                  labelText: "username",
                  icon: Icon(Icons.people),
                  hintText: "请输入用户名",
                  border: InputBorder.none,
                  filled: true,
                  fillColor: Colors.red[100]
              ),
              ///text改变时
              onChanged: (value) {
                print("onChange:$value");
              },
              ///text提交完成时
              onSubmitted: (value) {
                print("onSubmitted:$value");
              },
            )

/// 获取text
 final username = usernameTextEditController.text;