有人能解释一下为什么浮动动作按钮不起作用吗.我是这方面的新手

Question

浮动操作按钮未定义显示在vs代码上我无法理解自己我只是在学习youtube教程。

import 'package:flutter/material.dart';
void main() => runApp(  
MaterialApp(
home:Scaffold(
appBar: AppBar(
title: Text('flutter'),
centerTitle: true , 
),
body:Center(
child:Text("welcome to flutter") ,)
),
floatingActionButton : FloatingActionButton(
child: Text('click') 
), 
),
);

Answer 1

您正在MaterialApp上使用floatingActionButton属性
仅适用于Scaffold。

尝试如下：

void main() =>
runApp(
MaterialApp(
home: Scaffold(
appBar: AppBar(
title: Text('flutter'),
centerTitle: true,
),
body: Center(
child: Text("welcome to flutter"),
),
floatingActionButton: FloatingActionButton(
onPressed: () => print("FloatingActionButton Clicked"),
child: Text('click'))),
),
);

Answer 2

您正在MaterialApp上使用floatingActionButton属性。仅适用于脚手架。但若你们想要相同的功能，你们可以像这样的文本按钮。

TextButton(
child:Container(
width: 40,
height: 40,
child: Icon(
Icons.add,
color: Colors.white,
),
decoration: BoxDecoration(
shape: BoxShape.circle,
gradient: LinearGradient(
begin: Alignment.topCenter,
end: Alignment.bottomCenter,
colors: [
Color.fromARGB(250, 255, 166, 158),
Color.fromARGB(
250,
250,
243,
221,
),
]))),
onPressed: () {

},
),

Answer 3

floatingActionButton需要附加onPressed。以及需要在ScaffoldWidget内。

floatingActionButton: FloatingActionButton(
onPressed: () { //anything you need to do after tap  },
tooltip: 'Shopping Bag',
child: const Icon(Icons.shopping_basket),
),