Question

我有这个带有数据的自定义类，它称之为无状态小部件，而该无状态小部件在有状态小部件中调用，但不确定如何将数据传递给有状态小部件？

Model 
class ListOfIcon {
  String title;
  String imgurl;
  ListOfIcon({
    this.title,
    this.imgurl,
  });
}

数据：

final List<ListOfIcon> listoficons = [
  ListOfIcon(title: 'fsdf', imgurl: 'assets/images/p4.jpg'),
  ListOfIcon(title: 'fsdf', imgurl: 'assets/images/p4.jpg'),
  ListOfIcon(title: 'fsdf', imgurl: 'assets/images/p4.jpg'),
  ListOfIcon(title: 'fsdf', imgurl: 'assets/images/p4.jpg'),
  ListOfIcon(title: 'fsdf', imgurl: 'assets/images/p4.jpg'),
  ListOfIcon(title: 'fsdf', imgurl: 'assets/images/p4.jpg'),
];

无状态小部件：

class RowOFIcons extends StatelessWidget {
  final ListOfIcon listOfIcon;

  const RowOFIcons({
    Key key,
    this.listOfIcon,
  }) : super(key: key);
  @override
  Widget build(BuildContext context) {
    return SliverToBoxAdapter(
      child: GridView.builder(
        itemCount: 6,
        gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
          crossAxisCount: 4,
        ),
        itemBuilder: (BuildContext context, int index) {
          return Text(
            listOfIcon.title,
            style: TextStyle(
              color: Colors.white,
            ),
          );
        },
      ),
    );
  }
}

有状态的小部件：

class Profile extends StatefulWidget {
  @override
  _ProfileState createState() => _ProfileState();
}

class _ProfileState extends State<Profile> {
  ScrollController _scrollController;
  double _scrolloffset = 0.0;

  @override
  void initState() {
    _scrollController = ScrollController()
      ..addListener(() {
        setState(() {
          _scrolloffset = _scrollController.offset;
        });
      });
    super.initState();
  }

  @override
  void dispose() {
    _scrollController.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    final Size screenSize = MediaQuery.of(context).size;
    return Scaffold(
      appBar: PreferredSize(
        preferredSize: Size(screenSize.width, 50.0),
        child: CustomAppBar(
          scrollOffset: _scrolloffset,
        ),
      ),
      body: CustomScrollView(
        controller: _scrollController,
        slivers: [
          SliverPadding(
            padding: const EdgeInsets.all(8.0),
            sliver: ProfilePhoto(),
          ),
          SliverPadding(
            padding: const EdgeInsets.all(8.0),
            sliver: RowOFIcons(
              listOfIcon: listoficons.,
            ),
          ),
        ],
      ),
    );
  }
}

嗨，我有这个带有数据的自定义类，它称之为无状态小部件，而该无状态小部件在有状态小部件中调用，但不确定如何将数据传递给有状态小部件？

Answer 1

无状态小部件

class RowOFIcons extends StatelessWidget {
  final List<ListOfIcon> listoficons = [
  ListOfIcon(title: 'fsdf', imgurl: 'assets/images/p4.jpg'),
  ListOfIcon(title: 'fsdf', imgurl: 'assets/images/p4.jpg'),
  ListOfIcon(title: 'fsdf', imgurl: 'assets/images/p4.jpg'),
  ListOfIcon(title: 'fsdf', imgurl: 'assets/images/p4.jpg'),
  ListOfIcon(title: 'fsdf', imgurl: 'assets/images/p4.jpg'),
  ListOfIcon(title: 'fsdf', imgurl: 'assets/images/p4.jpg'),
];

  @override
  Widget build(BuildContext context) {
    return SliverToBoxAdapter(
      child: GridView.builder(
        itemCount: 6,
        gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
          crossAxisCount: 4,
        ),
        itemBuilder: (BuildContext context, int index) {
          return Text(
            listoficons[index].title,
            style: TextStyle(
              color: Colors.white,
            ),
          );
        },
      ),
    );
  }
}

有状态的小部件

class Profile extends StatefulWidget {
  @override
  _ProfileState createState() => _ProfileState();
}

class _ProfileState extends State<Profile> {
  @override
  Widget build(BuildContext context) {
    final Size screenSize = MediaQuery.of(context).size;
    return Scaffold(
      appBar: PreferredSize(
        preferredSize: Size(screenSize.width, 50.0),
        child: CustomAppBar(
          scrollOffset: _scrolloffset,
        ),
      ),
      body: RowOFIcons(),
    );
  }
}

Answer 2

您可以在构造函数中将数据传递给 StatefulWidget，就像将数据传递给无状态小部件一样。唯一的区别是您访问它的方式。例如：

class ExampleStateful extends StatefulWidget {
  // This widget accepts a title
  final String title;
  ExampleStateful({Key? key, required this.title}) : super(key: key);

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

class _ExampleStatefulState extends State<ExampleStateful> {
  @override
  Widget build(BuildContext context) {
    return Container(
      // Accessing the title with widget.title
      child: Text(widget.title),
    );
  }
}

class ExampleStateless extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Container(
      // Passing the title as parameter
      child: ExampleStateful(
        title: 'Hello World :)',
      ),
    );
  }
}

观看我在代码中所做的评论。希望它有所帮助:)

Answer 3

我认为您正在寻找的是一种状态管理解决方案。了解它here。

将数据从无状态小部件传递到有状态小部件

3 个答案: