Нужна помощь в создании многоразового виджета во флаттере - PullRequest
Новая
       5

Нужна помощь в создании многоразового виджета во флаттере

1 голос
/ 12 января 2020

Так что я делаю приложение с флаттером. Итак, в файле main.dart я делаю компонент, который в основном представляет собой связку виджетов. Мне пришлось использовать этот компонент несколько раз, поэтому я подумал о том, чтобы сделать эти повторно используемые компоненты в другом файле дротика, а затем импортировать их в main.dart .

Это мой код для многоразового использования .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(

        ),
      ),
    );
  }
}

Я планирую использовать этот виджет TileData в моем main.dart таким образом 


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

Есть ли способ, которым я могу достичь этого?

Ответы [ 3 ]

3 голосов
/ 12 января 2020

TileDate 

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

main 

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 голосов
/ 12 января 2020

Создайте свойство и используйте его в качестве аргумента в конструкторе многократно используемого виджета. 

final List<Widget> children;

TileData({this.children});

Затем в методе построения передайте свойство столбцу. 

Column(
  children: widget.children
)
0 голосов
/ 12 января 2020

Вы можете использовать ListView.builder()

добавить конструктор в вашем TileData виджете

что-то вроде 

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

)
...