flutter中自定義Widgets的使用方法

Question

我是Flutter的新手，我正在按照Flutter的官方教程學習flutter的基礎知識。

所以，我想創建一個名為“CustomCard”的可重用組件，我這樣做了：

class CustomCard extends StatelessWidget {
CustomCard({@required this.index, @required this.onPress});

   final index;
   final Function onPress;

   @override
   Widget build(BuildContext context) {
      return Card(
          child: Column(
              children: <Widget>[
                  Text('Card $index'),
                  FlatButton(
                      child: const Text('Press'),
                      onPressed: this.onPress,
                  )
             ],
          ),
      );
   }
}

現在，為了在 MyApp 中使用它，我這樣做了：

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
    // This widget is the root of your application.
    @override
    Widget build(BuildContext context) {
        return MaterialApp(
            title: 'Welcome to flutter',
                home: Scaffold(
                    appBar: AppBar(
                        title: Text('hello'),
                    ),
                body: Center(
                    child: Text('centre'),
                    CustomCard(
                        index:'card1',
                        onPress: print(' this is $index')
                    ),
                ),
            ),
        );
       }
      }

現在我的 IDE 說：

未為 class“MyApp”定義方法“CustonCard”。

如何解決這個問題？

終端錯誤：

Compiler message:
lib/main.dart:17:6: Error: Place positional arguments before named arguments.
Try moving the positional argument before the named arguments, or add a name to the argument.
                                        CustomCard(
                                        ^^^^^^^^^^
lib/main.dart:17:6: Error: Expected named argument.
                                        CustomCard(
                                        ^
lib/main.dart:15:21: Error: No named parameter with the name '#1'.
        body: Center(
                    ^^...
/C:/src/flutter/packages/flutter/lib/src/widgets/basic.dart:1863:9: Context: Found this candidate, but the arguments don't match.
  const Center({ Key key, double widthFactor, double heightFactor, Widget child })

編輯：更正了一個拼寫錯誤。 還添加控制台日志。

Answer 1

嘿，請在此處檢查更新的代碼。 有幾個編譯錯誤，因為您將 Text 和 CustomWidget 包裝在 Center 中，它只接受一個子窗口小部件，並且在 onPress 方法中需要一些代碼更改。

import 'package:flutter/material.dart';

final Color darkBlue = Color.fromARGB(255, 18, 32, 47);

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

class MyApp extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Welcome to flutter',
      home: Scaffold(
          appBar: AppBar(
            title: Text('hello'),
          ),
          body: Center(
              child:Column(
                mainAxisAlignment: MainAxisAlignment.center,
                children: <Widget>[
                  Text('centre'),
                  CustomCard(
                      index:'card1',
                      onPress: onPress
                  )
                ],
              )
          )
      ),
    );
  }
  onPress(index){
    print("this is $index");

  }
}
class CustomCard extends StatelessWidget {

  CustomCard({@required this.index, @required this.onPress});

  final index;
  final Function onPress;

  @override
  Widget build(BuildContext context) {
    return Card(
      child: Column(
        children: <Widget>[
          Text('Card $index'),
          FlatButton(
            child: const Text('Press'),
            onPressed: (){
              this.onPress(index);
            },
          )
        ],
      ),
    );
  }
}

Answer 2

你犯了一些錯誤，但不要擔心它會在一開始就發生。 那么讓我們進入問題：

首先，在 body 內部，您定義了一個Center Widget，它只允許其中有一個子項，但您嘗試放置兩個 Widget（ Text和CustomCard ）。 因此，要放置這兩個小部件，您可以將其更改為如下所示：

Center(
      child: Column(
        children: <Widget>[
          Text('centre'),
          CustomCard(...)
        ],
      ),
    ),

此外，請注意 onPress function 將 Function 作為參數，但您傳遞的是print(...)的結果，即void 。 只需將其更改為：

CustomCard(index: index, onPress: () => print(' this is $index'))

最后，我認為你錯過了定義索引變量。 只需添加：

String index = "card1";

Answer 3

                  child: Center(
                child: Row(
                  children: <Widget>[
                    _box(), //Custom pin view
                    _box(), //Custom pin view
                    _box(), //Custom pin view
                    _box(),//Custom pin view
                  ],
                ),
              )

和自定義小部件 (_box) 代碼

Widget _box() {
return Container(
margin: EdgeInsets.symmetric(vertical: 5, horizontal: 3),
alignment: Alignment.center,
height: 50,
width: 50,
child: TextField(
  keyboardType: TextInputType.number,
  maxLength: 1,
  decoration: InputDecoration(border: InputBorder.none, counterText: ''),
),
decoration: BoxDecoration(border: Border.all(color: Colors.blue)),

); }