Flutter 错误：无法将元素类型“按钮”分配给列表类型“小部件”

Question

我不知道为什么我会给出这个错误。我在这里写了 button.dart 文件：

 import 'package:flutter/material.dart';

class Button {
  double left;
  double top;
  String text;
  Button(this.text,this.top,
  this.left);

  Widget button(){
  return Positioned(
    left:left,

    top: top,
   child:Container(
          height: 54,
          width: 157,

          color: Colors.transparent,
          child:  Container(
            decoration: BoxDecoration(
              color: Colors.white,
              borderRadius: BorderRadius.all(Radius.circular(49))
            ),
            child:  Center(
            child:  Text(text,
            style: TextStyle(
              fontFamily: 'MontserratAlternates',
              fontStyle: FontStyle.normal,
              fontWeight: FontWeight.bold,
              fontSize: 20,
              letterSpacing: -0.02,
              color:Colors.black,

            ),
            ),
           )
         ),),
        );

  }
}

我在 main.dart 文件中对其进行了编码，但它不起作用，然后我有一个错误“元素类型 Button 无法分配给列表类型'Widget'”我不明白为什么我有这个错误。 这是 main.dart ：

import 'package:flutter/material.dart';
import './number.dart';
import'./image.dart';
import './button.dart';
void main() {
  runApp(Main());
}

class Main extends StatelessWidget {

  @override 
  Widget build(BuildContext context){



    return MaterialApp(
      title: 'Main',
      home: Scaffold(
        body: Container(

          child: Stack(
          children:<Widget> [

            image(context),
            Number(),
            Button("Start",412,45),


          ],
      ),
        ),
    ),
    );
  }
}

系统在警告我，所以我不应该像大多数代码那样写。

Answer 1

您的自定义小部件应继承自 StatefulWidget 或 StatelessWidget。通过扩展其中任何一个，Flutter 将把你的类识别为一个小部件。

class Button extends StatelessWidget {
  final double left;
  final double top;
  final String text;

  Button(this.text, this.top, this.left);

  @override
  Widget build(BuildContext context) {
    return Positioned(
      left: left,
      top: top,
      child: Container(
        height: 54,
        width: 157,
        color: Colors.transparent,
        child: Container(
          decoration: BoxDecoration(
              color: Colors.white,
              borderRadius: BorderRadius.all(Radius.circular(49))),
          child: Center(
            child: Text(
              text,
              style: TextStyle(
                fontFamily: 'MontserratAlternates',
                fontStyle: FontStyle.normal,
                fontWeight: FontWeight.bold,
                fontSize: 20,
                letterSpacing: -0.02,
                color: Colors.black,
              ),
            ),
          ),
        ),
      ),
    );
  }
}

否则，如果您想使用 button 函数执行此操作，则需要在创建 Button 后调用该函数。

import 'package:flutter/material.dart';
import './number.dart';
import './image.dart';
import './button.dart';

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

class Main extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Main',
      home: Scaffold(
        body: Container(
          child: Stack(
            children: <Widget>[
              image(context),
              Number(),
              Button("Start", 412, 45).button(),
            ],
          ),
        ),
      ),
    );
  }
}

Answer 2

我会将您的按钮类更改为如下所示：

class Button {
  double left;
  double top;
  String text;

  Widget button(this.text,this.top,this.left){
  return Positioned(
    left:left,

    top: top,
   child:Container(
          height: 54,
          width: 157,

          color: Colors.transparent,
          child:  Container(
            decoration: BoxDecoration(
              color: Colors.white,
              borderRadius: BorderRadius.all(Radius.circular(49))
            ),
            child:  Center(
            child:  Text(text,
            style: TextStyle(
              fontFamily: 'MontserratAlternates',
              fontStyle: FontStyle.normal,
              fontWeight: FontWeight.bold,
              fontSize: 20,
              letterSpacing: -0.02,
              color:Colors.black,

            ),
            ),
           )
         ),),
        );

  }
}

然后像这样调用那个方法：

import 'package:flutter/material.dart';
import './number.dart';
import'./image.dart';
import './button.dart';
void main() {
  runApp(Main());
}

class Main extends StatelessWidget {

  @override 
  Widget build(BuildContext context){



    return MaterialApp(
      title: 'Main',
      home: Scaffold(
        body: Container(

          child: Stack(
          children:<Widget> [

            image(context),
            Number(),
            button("Start",412,45),


          ],
      ),
        ),
    ),
    );
  }
}