在Flutter中,可以使用OutlineButton
组件来创建一个只有下划线边框的按钮。下面是详细的步骤:
OutlineButton
组件的引用。可以在项目的pubspec.yaml
文件中添加flutter/material.dart
的依赖项。dependencies:
flutter:
sdk: flutter
cupertino_icons: ^0.1.2
flutter/material.dart: ^1.0.0
OutlineButton
,并设置其属性值来实现只有下划线边框的效果。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: () {
// 按钮点击事件
},
),
),
);
}
}
上述代码中,OutlineButton
的borderSide
属性被设置为BorderSide(color: Colors.blue, width: 2.0)
,即设置边框的颜色为蓝色,宽度为2.0。shape
属性被设置为RoundedRectangleBorder
,以添加圆角边框。child
属性用于设置按钮上显示的文本内容。
MyButtonPage
页面。void main() {
runApp(MaterialApp(
home: MyButtonPage(),
));
}
这样,您就可以在Flutter中创建一个只有下划线边框的OutlineButton
了。
推荐的腾讯云产品:腾讯云移动开发套件(Mobile Developer Kit)
领取专属 10元无门槛券
手把手带您无忧上云