请使用flutter语言编写, flutter页面上导航AppBar action属性,action使用文字显示,文字根据TextField的输入框决定,当TextField输入框有内容的时候,action文字就显示黑色,当没有内容时候就显示灰色
时间: 2023-11-14 08:06:05 浏览: 27
好的,以下是使用 Flutter 编写的实现:
```dart
import 'package:flutter/material.dart';
class MyApp extends StatefulWidget {
@override
_MyAppState createState() => _MyAppState();
}
class _MyAppState extends State<MyApp> {
TextEditingController _textEditingController = TextEditingController();
bool _isTextEmpty = true;
@override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
appBar: AppBar(
title: Text('Navigation App Bar'),
actions: [
TextButton(
onPressed: _isTextEmpty ? null : () {},
child: Text(
'Search',
style: TextStyle(
color: _isTextEmpty ? Colors.grey : Colors.black,
),
),
),
],
),
body: Container(
padding: EdgeInsets.all(16),
child: TextField(
controller: _textEditingController,
onChanged: (text) {
setState(() {
_isTextEmpty = text.isEmpty;
});
},
decoration: InputDecoration(
hintText: 'Type something here',
),
),
),
),
);
}
}
```
在这个示例中,我们创建了一个状态对象 `_MyAppState`,并在 `build` 方法中返回一个 `Scaffold`。在 `Scaffold` 的 `appBar` 属性中,我们使用 `AppBar` 小部件,并在其中定义了一个 `TextButton` 作为 `actions`,并设置其 `onPressed` 和 `child` 属性,以便在文本框为空时禁用按钮,并在文本框中输入文本时启用该按钮。在文本框中输入时,我们使用 `onChanged` 回调更新状态 `_isTextEmpty`,以便在按钮状态中使用。