如何从 Flutter 中的另一个文件调用小部件部分

Fay*_*kon 4 flutter flutter-layout

我在 main.dart 中定义了 Method 和 Widget 部分,我的代码运行良好,

我创建了新文件 method.dart 并使用了该文件中的所有方法,并在我的主文件中使用了导入的方法,并且它起作用了,

但我的问题是如何从 main.dart 中的另一个文件调用 Widget 部分。

主要.dart:

如何从另一个文件调用以下小部件:

Widget buttonSection = Container(
      child: Row(
        mainAxisAlignment: MainAxisAlignment.spaceEvenly,
        children: [
          _buildButtonColumn(color, Icons.call, 'CALL'),
          _buildButtonColumn(color, Icons.near_me, 'ROUTE'),
          _buildButtonColumn(color, Icons.share, 'SHARE'),
        ],
      ),
    );
Run Code Online (Sandbox Code Playgroud)

可以从另一个文件调用以下方法:

Column _buildButtonColumn(Color color, IconData icon, String label) {
    return Column(
      mainAxisSize: MainAxisSize.min,
      mainAxisAlignment: MainAxisAlignment.center,
      children: [
        Icon(icon, color: color),
        Container(
          margin: const EdgeInsets.only(top: 8),
          child: Text(
            label,
            style: TextStyle(
              fontSize: 12,
              fontWeight: FontWeight.w400,
              color: color,
            ),
          ),
        ),
      ],
    );
  }
Run Code Online (Sandbox Code Playgroud)

在材料函数中使用它:

return MaterialApp(
      title: 'Flutter layout demo',
      home: Scaffold(
        appBar: AppBar(
          title: Text('Flutter layout demo'),
        ),
        body: ListView(
          children: [
            Image.asset(
              'images/lake.jpg',
              width: 600,
              height: 240,
              fit: BoxFit.cover,
            ),

            buttonSection,

          ],
        ),
      ),
    );
Run Code Online (Sandbox Code Playgroud)

Jay*_*ara 6

要使用任何文件中的 buttonSection 小部件,无论它是 main.dart 文件还是任何其他 dart 文件,您都必须从任何类中全局编写 buttonSection 小部件。

因此,您可以访问该特定小部件。如果您在 Stateful 或 Stateless 类中创建它,那么您将无法访问 buttonSection 小部件。

因此,创建一个 dart 文件并从所有类中添加以下小部件并全局定义。

Widget buttonSection = Container(
  child: Row(
    mainAxisAlignment: MainAxisAlignment.spaceEvenly,
    children: [
      _buildButtonColumn(color, Icons.call, 'CALL'),
      _buildButtonColumn(color, Icons.near_me, 'ROUTE'),
      _buildButtonColumn(color, Icons.share, 'SHARE'),
    ],
  ),
);
Run Code Online (Sandbox Code Playgroud)

然后在任何地方访问它,导入包含 buttonSection 小部件的 dart 文件,你可以像这样使用它,

@override
  Widget build(BuildContext context) {
    return buttonSection;
  }
Run Code Online (Sandbox Code Playgroud)

另外,请记住,您的小部件/变量/函数名称不应以“_”开头,以便从另一个 dart 文件全局访问它。