import ‘package:flutter/material.dart’;

  • 基础组件
    文本
Text("Hello world",
  textAlign: TextAlign.left,//对齐方式
  softWrap: true,//自动换行
  overflow: TextOverflow.ellipsis,//超出省略号, visible溢出到父组件
  style: TextStyle(
                  color: Colors.blue,//Colors.blue.withOpacity(.4),透明度
                  fontSize: 16,
                  height: 1.2,
                  fontWeight: FontWeight.bold,//粗细 w100-w900 w700是bold
                  fontStyle: FontStyle.italic,//斜体
                  fontFamily: 'maobi',
                  background: Paint()..color = Colors.yellow.shade50,
                  decoration: TextDecoration.underline,
                  decorationStyle: TextDecorationStyle.dashed),
);

ThemeData(
        primarySwatch: Colors.blue,
          textTheme: TextTheme(
            bodyText2: TextStyle(color: Colors.red,fontSize: 24),//整个页面默认字体大小颜色
          )
      )
配置字体pubspec.yaml
fonts:
  - family: maobi 
    fonts:
      - asset: assets/fonts/maobi.ttf

多行组件,两个功能一样

import 'package:flutter/gestures.dart'; //必须要导入手势
const MyHomePage({Key?key, required this.title}):super(key: key); //常量修改
Text.rich(
              TextSpan(
                  text: '登录即代表同意并阅读',
                  style: TextStyle(fontSize: 16, color: Color(0xFF999999)),
                  children: [
                    TextSpan(
                      text: '《服务协议》',
                      style: TextStyle(color: Colors.blue, fontWeight: FontWeight.bold),
                      recognizer:TapGestureRecognizer()..onTap = () {
                        print("object");
                        },
                    ),
                  ]),
            )
RichText(
              text: TextSpan(
style:TextStyle(fontSize: 16,color:Colors.black),//DefaultTextStyle.of(context).style,继承默认样式
                  children: <InlineSpan>[
                    TextSpan(text: '协议内容'),
                    TextSpan(
                      text: '《xxx服务协议》',
                      style: TextStyle(color: Colors.red),
                      recognizer: TapGestureRecognizer()..onTap = () {
                        print("object");
                      },
                    ),
                  ]),
            )

输入框

 var _textFieldValue = '';
TextField(
          onChanged: (value){
            setState(() {
              _textFieldValue = value;
            });
          },
          obscureText: true,//密码框
          decoration: InputDecoration(
            icon: Icon(Icons.person),//prefixIcon: Icon(Icons.person)显示在输入框
            labelText: '姓名:',
              labelStyle: TextStyle(color:Colors.red),
            floatingLabelBehavior: FloatingLabelBehavior.never,//输入时候隐藏
            helperText: '用户名长度为6-10个字母',//描述
            helperStyle: TextStyle(color: Colors.blue),
              helperMaxLines: 1,
            hintText: '请输入用户名',//输入时候提示
            errorText: '用户名输入错误',
            errorBorder: OutlineInputBorder(borderSide: BorderSide(color: Colors.red)),
            counterText: '${_textFieldValue.length}/5',

          ),
        ),

右下角悬浮按钮

floatingActionButton: FloatingActionButton(
        onPressed: _incrementCounter,
        tooltip: '悬浮按钮',
        child: const Icon(Icons.add),
      ),

头部

appBar: AppBar(
        title: Text(widget.title),
          centerTitle: true,
        leading: const BackButton(),//返回
        actions: <Widget>[
          IconButton(icon: Icon(Icons.menu),onPressed: (){
            BrnToast.show("菜单", context);
          },),
          IconButton(icon: Icon(Icons.add),onPressed: (){
            BrnToast.show("添加", context);
          },)
        ],
      ),
作者:Yoby  创建时间:2022-11-11 10:43
 更新时间:2024-12-05 13:26
上一篇:
下一篇: