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),


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

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

2 个答案: