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);
},)
],
),
文档更新时间: 2022-11-16 11:56 作者:Yoby