在颤振中制作可重复使用的小部件时需要帮助答案

【问题标题】：Need help in making a reusable widget in flutter在颤振中制作可重复使用的小部件时需要帮助
【发布时间】：2020-04-29 07:07:57
【问题描述】：

所以我正在制作一个带有颤振的应用程序。所以在 main.dart 文件中，我正在制作一个组件，它基本上是一堆包装在一起的小部件。我必须多次使用这个组件，所以我想在另一个 dart 文件中制作这些可重复使用的组件，然后将其导入 main.dart。

这是我的 reusable.dart 代码

import 'package:flutter/material.dart';

double mainTab = 150;

class TileData extends StatefulWidget {
  @override
  _TileDataState createState() => _TileDataState();
}

class _TileDataState extends State<TileData> {
  @override
  Widget build(BuildContext context) {
    return Container(
      height: 200 - 15.0,
      width: mainTab - 10.0,
      child: Padding(
        padding: const EdgeInsets.fromLTRB(10, 15, 0, 0),
        child: Column(

        ),
      ),
    );
  }
}

我打算以这种方式在我的 main.dart 中使用这个 TileData Widget


ListView(
   children: children: <Widget>[
      TileData(
          children: <Widget>[
               Text('Element 1'),
]),
      TileData(
          children: <Widget>[
               Text('Element 2'),
]),
      TileData(
          children: <Widget>[
               Text('Element 3'),
],
)
],
),

所以 TileData() 小部件的子级实际上是在 reusable.dart

中最后包装在小部件中的列的子级

有什么方法可以实现吗？

【问题讨论】：

标签： flutter flutter-widget

【解决方案1】：

您可以使用ListView.builder()

在您的 TileData 小部件中添加构造函数

类似

ListView.builder(
itemCount:data.length,
itemBuilder: (context,index){
return TileData(data:"Element $index");
}

)

【讨论】：

【解决方案2】：

平铺日期

import 'package:flutter/material.dart';

double mainTab = 150;

class TileData extends StatefulWidget {
  List<Widget> widgetsList;
  TileData({this.widgetsList});

  @override
  _TileDataState createState() => _TileDataState();
}

class _TileDataState extends State<TileData> {
  @override
  Widget build(BuildContext context) {
    return Container(
      height: 200 - 15.0,
      width: mainTab - 10.0,
      child: Padding(
        padding: const EdgeInsets.fromLTRB(10, 15, 0, 0),
        child: Column(
          children: widget.widgetsList,
        ),
      ),
    );
  }
}

主要

import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:flutter/rendering.dart';
import 'package:test/widgets/TileData.dart';

void main() => runApp(MaterialApp(
      home: Scaffold(backgroundColor: Color(0xFF2d3447), body: MyApp()),
    ));

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return ListView(
      children: [
        TileData(
          widgetsList: [Text("Element 1")],
        ),
        TileData(
          widgetsList: [Text("Element 2")],
        ),
        TileData(
          widgetsList: [Text("Element 3")],
        )
      ],
    );
  }
}

这样你可以重复使用

【讨论】：

【解决方案3】：

创建一个属性并将其用作可重用小部件的构造函数中的参数。

final List<Widget> children;

TileData({this.children});

然后，在您的构建方法中，将属性传递给列。

Column(
  children: widget.children
)

【讨论】：