首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

如何在Flutter中仅为OutlineButton设置下划线边框

在Flutter中,可以使用OutlineButton组件来创建一个只有下划线边框的按钮。下面是详细的步骤:

  1. 首先,在您的Flutter项目中添加OutlineButton组件的引用。可以在项目的pubspec.yaml文件中添加flutter/material.dart的依赖项。
代码语言:txt
复制
dependencies:
  flutter:
    sdk: flutter
  cupertino_icons: ^0.1.2
  flutter/material.dart: ^1.0.0
  1. 在您的Flutter页面中,使用以下代码创建一个OutlineButton,并设置其属性值来实现只有下划线边框的效果。
代码语言:txt
复制
import 'package:flutter/material.dart';

class MyButtonPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('OutlineButton示例'),
      ),
      body: Center(
        child: OutlineButton(
          borderSide: BorderSide(color: Colors.blue, width: 2.0),
          shape: RoundedRectangleBorder(
            borderRadius: BorderRadius.circular(8.0),
          ),
          child: Text('点击我'),
          onPressed: () {
            // 按钮点击事件
          },
        ),
      ),
    );
  }
}

上述代码中,OutlineButtonborderSide属性被设置为BorderSide(color: Colors.blue, width: 2.0),即设置边框的颜色为蓝色,宽度为2.0。shape属性被设置为RoundedRectangleBorder,以添加圆角边框。child属性用于设置按钮上显示的文本内容。

  1. 在您的应用程序中使用MyButtonPage页面。
代码语言:txt
复制
void main() {
  runApp(MaterialApp(
    home: MyButtonPage(),
  ));
}

这样,您就可以在Flutter中创建一个只有下划线边框的OutlineButton了。

推荐的腾讯云产品:腾讯云移动开发套件(Mobile Developer Kit)

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

Flutter 专题】62 图解基本 Button 按钮小结 (二)

凸起按钮,FlatButton 扁平按钮和 OutlineButton 边框按钮;可根据不同场景灵活运用; ?...与其他两种按钮略有不同,强调边框的样式属性且无长按的 tooltip 属性; 案例尝试 和尚首先尝试一个最基本的 OutlineButton;长按无提醒; OutlineButton(child: Text...以下为 OutlineButton 特有属性:borderSide 代表边框样式;disabledBorderColor 代表不可点击时边框颜色;highlightedBorderColor 代表高亮时边框颜色...;其中 borderSide 可以设置边框颜色宽度及样式(solid / none); OutlineButton(child: Text('OutlineButton'), borderSide...;和尚以 OutlineButton 为例,一目了然; // Text 设置颜色 OutlineButton( child: Text('OutlineButton', style: TextStyle

1.3K41
  • Flutter | 常用组件

    ,elevation 这个属性会在很多组件见到,都是用来控制阴影的 图片 在 Flutter ,我们可以通过 Image 组件来加载并显示图片,Image 的加载源可能是 asset,文件,内存,以及网络...,在图片加载完成之后显示淡入 ICON 在 Flutter ,可以直接使用 字体图标,它是将图标做成字体文件,然后通过指定不同的字符而现实不同的图片 在字体文件,每个字符都对应一个码,每个码对应一个显示字形...而在 iconfont ,只是将位码对应的字形做成了图标,所以不同的字符最终就会渲染成不同的图标 在 Flutter ,iconfont 和图片相比有如下优势 1,体积小 2,矢量的图标,放大不会影响清晰度...InputDecoration:用于控制 TextField 的外观显示,提示文本,背景颜色,边框等 keyboardType :用于设置该输入框的键盘输入类型,取值如下: image.png...,日后解决 表单 Form 在实际开发,在请求接口之前会对输入框的数据进行校验,如果对每个 TextField 都进行校验会非常麻烦,为此,Flutter 提供了一个 Form 组件,他可以对

    11.4K30

    Flutter》-- 4.Flutter组件基础

    FlutterWidget不仅可以表示UI元素,也可以布局元素、动画、装饰效果。 Widget不是最终显示在设备屏幕上的显示元素,而是一个描述显示元素的配置数据。...Flutter真正代表屏幕显示元素的类是Element。 在大多数场景下,可以宽泛地认为Widget树就是指UI组件树或UI渲染树。...具体选择哪种状态管理,可以参考如下基本原则: 1)如果状态是有关界面外观效果的(颜色、动画等),最好由Widget自身管理; 2)如果状态是用户数据(复选框的选中状态、滑块位置等),最好由父Widget...:默认是一个带有边框、不带阴影且背景透明的按钮,按下后边框颜色会变亮,同时会出现背景和阴影效果; IconButton:一个可点击的图标按钮,不支持文字,默认没有背景,点击后会出现背景。...decoration:用于控制TextField组件的外观显示,提示文本、背景颜色和边框。 textAlign:输入框内文本在水平方向的对齐方式。 textDirection:输入框内文本的方向。

    12.5K30

    Flutter学习

    // =>是return语句的简写 add3(a, b) => a + b; 变量以下划线(_)开头,在Dart语言中使用下划线前缀标识符,会强制其变成私有的。...在Flutter,一个自定义widget通常是通过组合其它widget来实现的,而不是继承 某些widget属性需要单个widget(child),而其它一些属性,action,需要一组widgets...height如果不设置 界面显示会有问题,如果要设置,又不能准确的计算出结果,可以使用Expanded BoxDecoration:圆角,需要放在Container里,实现边框、圆角、阴影、形状、渐变、...FlatButton :扁平化的按钮,继承自MaterialButton OutlineButton :带边框的按钮,继承自MaterialButton IconButton :图标按钮,继承自...如何使用原生控件或组件 Flutter代码通常涉及构建相当深的树状数据结构,例如在一个build方法

    2.6K20

    Flutter开发-基本组件

    启程 用Flutter开发主要的优势就在于UI层的构建,说到界面设计给出的尺寸的单位和开发的单位不一致,那么我们就要获取设备的宽度 final size = MediaQuery.of(context)...查看Flutter各组件的网站:https://ui.flutterdart.cn/ TextField 基本示例 TextField( decoration: const InputDecoration...TextEditingController(text: this.username), onChanged: (val) { this.username = val; }, ), Button Flutter...给我们预先定义好了一些按钮控件给我们用,常用的按钮如下 RaisedButton :凸起的按钮,其实就是Android的Material Design风格的Button ,继承自MaterialButton...FlatButton :扁平化的按钮,继承自MaterialButton OutlineButton :带边框的按钮,继承自MaterialButton IconButton :图标按钮,继承自StatelessWidget

    75110

    Flutter』常用组件 按钮、图片

    2.常用组件 在Flutter,有多种按钮组件可以用于创建交互式界面。主要的按钮组件包括: ElevatedButton:这是一个凸起的按钮,常用于主要的操作。...OutlineButton(现在称为OutlinedButton):这个按钮有一个边框,但没有背景色。当按下时,边框和文字颜色会变化,适用于需要强调边框而非背景色的场景。...FloatingActionButton:这是一个圆形的按钮,通常悬浮在内容上方,用于促进应用的主要动作,添加、编辑等。...这对于一些图标(箭头)非常重要,其方向可能会因语言的阅读方向(从左到右或从右到左)而改变。...如果不设置,图片会根据其父组件和其他内容自动调整大小。 height (double): 图片的高度。同样,如果不设置,会自动调整。 fit (BoxFit): 如何处理图片的缩放和对齐。

    50231

    Flutter Widgets 之 Expanded和Flexible

    Expanded和Flexible是控制Row、Column、Flex的子控件如何布局的控件,Expanded和Flexible可以扩张填满主轴剩余空间,如何确认主轴和交叉轴可以查看[Flutter Widgets...Flexible fit参数默认是FlexFit.loose,而Expanded固定为FlexFit.tight。...因此如果在使用Flexible时,设置fit为FlexFit.tight,那么Flexible和Expanded就一模一样了,代码如下: Flexible( fit: FlexFit.tight,...Container默认是适配子控件大小的,但当设置对齐方式时Container将会填满父控件,在Flutter Widgets 之 Container已经详细介绍,因此是否填满剩余空间取决于子控件是否需要填满父控件...flex 参数flex表示权重(类似于Android的weight),在Column添加3个子控件,flex分别为1、2、3,代码如下: Column( children: <Widget

    1.4K20
    领券