Question

如何在一个屏幕上更改小部件？

例如

首先，我有一个无状态小部件

然后

第二个无状态小部件

我在其中定义

final _mywidgets = [
widget1,
widget2
]

但是当我打电话给他们

body : _mywidgets.elementAt(myindex)

但是，当我先使用导航栏转到其他场景或页面时，它会发生变化，然后当我返回此页面时，秒钟小部件就会显示出来。

有人有have依吗？

代码：

class Tren_page extends StatefulWidget {
  @override
  _Tren_pageState createState() => _Tren_pageState();
}

int _myindex = 0;

class _Tren_pageState extends State<Tren_page> {
  final _posisihalaman = [PilihanPertama(), PilihanKonsumen()];

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
          leading: Icon(Icons.show_chart),
          backgroundColor: Colors.redAccent,
          elevation: 0,
          title: Row(
            mainAxisAlignment: MainAxisAlignment.spaceBetween,
            children: <Widget>[Text("Trend"), Text("my App")],
          )),
      body: Center(
        child: _posisihalaman.elementAt(_myindex),
      ),
    );
  }
}

class PilihanPertama extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Container(
      child: Column(
        children: <Widget>[
          Spacer(),
          GestureDetector(
            onTap: () {
              _myindex = 1;
            },
            child: Container(
              width: MediaQuery.of(context).size.width * 0.6,
              height: 50.0,
              decoration: BoxDecoration(
                  color: Colors.red.shade700,
                  boxShadow: [BoxShadow(blurRadius: 3.0, color: Colors.grey)]),
              child: Row(
                // mainAxisAlignment: MainAxisAlignment.center,
                children: <Widget>[
                  Container(
                    width: 50.0,
                    height: MediaQuery.of(context).size.height,
                    decoration: BoxDecoration(color: Colors.amber),
                    child: Icon(
                      Icons.show_chart,
                      color: Colors.white,
                    ),
                  ),
                  SizedBox(
                    width: 25.0,
                  ),
                  Text(
                    "Konsumen",
                    style: TextStyle(color: Colors.white, fontSize: 18.0),
                  )
                ],
              ),
            ),
          ),
          SizedBox(
            height: 15.0,
          ),
          GestureDetector(
            onTap: () {
              _myindex = 1;
            },
            child: Container(
              width: MediaQuery.of(context).size.width * 0.6,
              height: 50.0,
              decoration: BoxDecoration(
                  color: Colors.green.shade700,
                  boxShadow: [BoxShadow(blurRadius: 3.0, color: Colors.grey)]),
              child: Row(
                // mainAxisAlignment: MainAxisAlignment.center,
                children: <Widget>[
                  Container(
                    width: 50.0,
                    height: MediaQuery.of(context).size.height,
                    decoration: BoxDecoration(color: Colors.amber),
                    child: Icon(
                      Icons.show_chart,
                      color: Colors.white,
                    ),
                  ),
                  SizedBox(
                    width: 25.0,
                  ),
                  Text(
                    "Produsen",
                    style: TextStyle(color: Colors.white, fontSize: 18.0),
                  )
                ],
              ),
            ),
          ),
          SizedBox(
            height: 15.0,
          ),
          GestureDetector(
            onTap: () {
              _myindex = 1;
            },
            child: Container(
              width: MediaQuery.of(context).size.width * 0.6,
              height: 50.0,
              decoration: BoxDecoration(
                  color: Colors.blue.shade700,
                  boxShadow: [BoxShadow(blurRadius: 3.0, color: Colors.grey)]),
              child: Row(
                // mainAxisAlignment: MainAxisAlignment.center,
                children: <Widget>[
                  Container(
                    width: 50.0,
                    height: MediaQuery.of(context).size.height,
                    decoration: BoxDecoration(color: Colors.amber),
                    child: Icon(
                      Icons.show_chart,
                      color: Colors.white,
                    ),
                  ),
                  SizedBox(
                    width: 25.0,
                  ),
                  Text(
                    "Pengusaha",
                    style: TextStyle(color: Colors.white, fontSize: 18.0),
                  )
                ],
              ),
            ),
          ),
          Spacer(),
        ],
      ),
    );
  }
}

class PilihanKonsumen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Container(
      child: GestureDetector(
        onTap: (){_myindex = 0;},
         child: Text("Pilihan Konsumen")),
    );
  }
}

Answer 1

您必须尝试一下，

import 'package:flutter/material.dart';

class Question6 extends StatefulWidget {
  @override
  State<StatefulWidget> createState() {
    return _Question6State();
  }
}

class _Question6State extends State<Question6> {
  int _currentIndex = 0;

  List<Widget> _mywidgets = [
    Center(
      child: Text('Screen 1'),
    ),
    Center(
      child: Text('Screen 2'),
    ),
    Center(
      child: Text('Screen 3'),
    ),
  ];

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(),
      body: _mywidgets.elementAt(_currentIndex),
      bottomNavigationBar: BottomNavigationBar(
        currentIndex: _currentIndex,
        onTap: onTabTapped,
        items: [
          BottomNavigationBarItem(
            icon: new Icon(Icons.home),
            title: new Text('Screen 1'),
          ),
          BottomNavigationBarItem(
            icon: new Icon(Icons.notifications_none),
            title: new Text('Screen 2'),
          ),
          BottomNavigationBarItem(
            icon: new Icon(Icons.explore),
            title: new Text('Screen 3'),
          ),
        ],
      ),
    );
  }

  void onTabTapped(int index) {
    setState(() {
      _currentIndex = index;
    });
  }
}

希望这会对您有所帮助。

一屏式切换小部件

1 个答案: