Flutter文本按钮插件text_button的使用

Flutter文本按钮插件text_button的使用

在Flutter中，TextButton 是一个非常常用的控件，用于创建带有文本标签的按钮。本文将通过完整的示例代码展示如何使用 TextButton。

使用步骤

1. 导入必要的包

首先确保您的项目已经配置好 Flutter 环境，并且无需额外安装其他包，因为 TextButton 是 Flutter 框架的一部分。

import 'package:flutter/material.dart';

2. 创建一个简单的 TextButton

下面是一个简单的示例，展示如何创建一个点击时会弹出提示框的 TextButton。

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('TextButton 示例'),
        ),
        body: Center(
          child: MyButton(),
        ),
      ),
    );
  }
}

class MyButton extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return TextButton(
      onPressed: () {
        // 当按钮被点击时触发的回调函数
        showDialog(
          context: context,
          builder: (BuildContext context) {
            return AlertDialog(
              title: Text("提示"),
              content: Text("你点击了按钮！"),
              actions: [
                TextButton(
                  onPressed: () {
                    Navigator.of(context).pop(); // 关闭对话框
                  },
                  child: Text("确定"),
                ),
              ],
            );
          },
        );
      },
      child: Text("点击我"), // 按钮上的文字
    );
  }
}

3. 运行效果

运行上述代码后，您将在屏幕中央看到一个标有“点击我”的按钮。当您点击该按钮时，会弹出一个提示框，显示“你点击了按钮！”。

TextButton 示例

可选参数

TextButton 提供了许多可选参数来定制按钮的外观和行为：

  • onPressed: 按钮被点击时执行的回调函数。
  • child: 按钮上显示的内容（如文本）。
  • style: 自定义按钮的样式（如颜色、边距等）。

例如，您可以更改按钮的颜色和形状：

TextButton(
  onPressed: () {},
  style: TextButton.styleFrom(
    primary: Colors.red, // 文字颜色
    backgroundColor: Colors.blue, // 背景颜色
    shape: RoundedRectangleBorder( // 设置圆角
      borderRadius: BorderRadius.circular(10),
    ),
  ),
  child: Text("自定义按钮"),
)

更多关于Flutter文本按钮插件text_button的使用的实战教程也可以访问 https://www.itying.com/category-92-b0.html

1 回复

更多关于Flutter文本按钮插件text_button的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html


在 Flutter 中，TextButton 是一个常用的 Material Design 按钮组件，用于创建文本按钮。TextButton 是一个无边框的按钮，通常用于对话框、卡片或其他需要简洁按钮的地方。

基本用法

要使用 TextButton，你只需要提供 onPressed 回调函数和 child 子组件。onPressed 是按钮被点击时触发的回调函数，child 是按钮上显示的内容，通常是一个 Text 组件。

import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('TextButton Example'),
        ),
        body: Center(
          child: TextButton(
            onPressed: () {
              // 按钮点击时的操作
              print('Button Pressed!');
            },
            child: Text('Click Me'),
          ),
        ),
      ),
    );
  }
}

自定义样式

你可以通过 style 参数来自定义 TextButton 的样式。TextButton.styleFrom 是一个常用的方法，用于创建 ButtonStyle。

TextButton(
  onPressed: () {
    print('Button Pressed!');
  },
  style: TextButton.styleFrom(
    primary: Colors.white, // 文本颜色
    backgroundColor: Colors.blue, // 背景颜色
    padding: EdgeInsets.symmetric(horizontal: 20, vertical: 10), // 内边距
    shape: RoundedRectangleBorder(
      borderRadius: BorderRadius.circular(8), // 圆角
    ),
  ),
  child: Text('Click Me'),
)

禁用按钮

你可以通过将 onPressed 设置为 null 来禁用按钮。禁用时，按钮的颜色会变淡。

TextButton(
  onPressed: null, // 禁用按钮
  child: Text('Disabled Button'),
)

使用 TextButton.icon

TextButton.icon 是一个带有图标和文本的按钮。你需要提供 icon 和 label 参数。

TextButton.icon(
  onPressed: () {
    print('Button with Icon Pressed!');
  },
  icon: Icon(Icons.thumb_up),
  label: Text('Like'),
)
回到顶部