一、TextButton(文本按钮)
用法:
(1)TextButton() 创建普通的文本按钮
(2)TextButton.icon() 创建一个带图标的文本按钮
属性:
child:Widget,必填,按钮内容
onPressed:void Function(),必填,点击事件
style: ButtonStyle,按钮样式
import 'package:flutter/material.dart';
class Home extends StatelessWidget {
const Home({Key? key}) : super(key: key);
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: const Text('Text Button'),
),
body: Container(
padding: const EdgeInsets.all(10),
child: Wrap(
alignment: WrapAlignment.start,
children: [
// 普通文本按钮
TextButton(
onPressed: () {}, // 点击触发
onLongPress: () {}, // 长按触发
child: const Text('TextButton'),
),
// 文本按钮 -- 属性用法
TextButton(
onPressed: () {},
child: const Text('TextButton'),
style: ButtonStyle(
// button 按钮字体样式,按钮颜色由 foregroundColor 设置
textStyle: MaterialStateProperty.all(
const TextStyle(
fontSize: 30, // 字体大小
color: Colors.purple, // 注意:此处字体颜色无效
fontWeight: FontWeight.bold, // 字体粗细
),
),
// button 按钮文本和Icon的颜色,上面 textStyle 中的color设置无效
foregroundColor: MaterialStateProperty.all(
Colors.red,
),
// button 按钮背景填充颜色
backgroundColor: MaterialStateProperty.all(
Colors.purple[50],
),
// button 点击时的高亮颜色
overlayColor: MaterialStateProperty.all(
Colors.yellowAccent,
),
// button 按钮内边距
padding: MaterialStateProperty.all(const EdgeInsets.all(20)),
// button 按钮边框相关的样式
shape: MaterialStateProperty.all(RoundedRectangleBorder(
// 边框样式
side: const BorderSide(
width: 5,
color: Colors.blue,
),
// 边框圆角
borderRadius: BorderRadius.circular(20),
)),
// button 按钮阴影高度
e