如何通过单击放置在同一页面上的小部件来显示不同的小部件

Posted 2023-02-23

【中文标题】如何通过单击放置在同一页面上的小部件来显示不同的小部件

【英文标题】：How to show up different widget on by clicking which are placed on the same page in flutter

【发布时间】：2021-01-30 22:26:45

【问题描述】：

我想引用特定有状态小部件类的不同部分，其中包含许多其他不同的小部件。 单击按钮后，它应该向下滑动并在同一页面上显示特定的小部件。

预期输出：

到目前为止我所取得的只是页面，但可以通过向上滑动转换获得相同的输出

这是我的代码 sn-p：

 Positioned(
                        top: 330,
                        left: 1300,
                        child: InkWell(
                          onTap: () ,
                          child: Card(
                            child: Container(
                              height: 100.h,
                              width: 60.h,
                              child: RotatedBox(
                                quarterTurns: 3,
                                child: Center(
                                  child: Text(
                                    'CONTACT?',
                                    style: blue,
                                  ),
                                ),
                              ),
                            ),
                          ),
                        ),
                      ), 

提取的小部件：

class AboutUs extends StatelessWidget 
  const AboutUs(
    Key key,
  ) : super(key: key);

  @override
  Widget build(BuildContext context) 
    return Container(
      height: 600.h,
      width: 1300.w,
      child: Stack(
        children: [
          Positioned(
            top: 10,
            //left: 0,
            child: Container(
              height: 400.h,
              width: 150.w,
              //color: Colors.green,
              child: Image.asset(
                'images/Rectangle 7.png',
                fit: BoxFit.fill,
              ),
            ),
          ),
          Positioned(
            top: 30,
            left: 60,
            child: Container(
              height: 300.h,
              width: 300.w,
              //color: Colors.green,
              child: Image.asset(
                'images/rect.png',
                fit: BoxFit.fill,
              ),
            ),
          ),
          Positioned(
            top: 20,
            left: 600,
            child: Text(
              'ABOUT US',
              style: TextStyle(
                  fontFamily: 'Poppins',
                  fontSize: 30,
                  color: AppColors.getLightYellow()),
            ),
          ),
          Positioned(
            top: 50,
            left: 600,
            child: Center(
              child: Container(
                height: 550.h,
                width: 450.w,
                child: Center(
                  child: Text(
                    'Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna',
                    style: contact2,
                  ),
                ),
              ),
            ),
          ),
          Positioned(
            top: 370,
            left: 500,
            child: Container(
              height: 60.h,
              width: 800.w,
              color: AppColors.getLightBlue(),
            ),
          ),
          Positioned(
            top: 330,
            left: 1300,
            child: InkWell(
              onTap: () ,
              child: Card(
                child: Container(
                  height: 100.h,
                  width: 60.h,
                  child: RotatedBox(
                    quarterTurns: 3,
                    child: Center(
                      child: Text(
                        'HOW?',
                        style: blue,
                      ),
                    ),
                  ),
                ),
              ),
            ),
          ),
        ],
      ),
    );
  

【参考方案1】：

你可以通过不同的方法来解决这个问题。最简单的解决方案是创建一个“状态”并包含一个“可见”小部件。当您更改小部件时，您会将可见小部件替换为您要显示的新小部件。

class _MyHomePageState extends State<MyHomePage> 
  Widget _visibleWidget = Text("Not the visible Widget");

  void _changeWidget() 
    setState(() 
      _visibleWidget = Icon(Icons.group);
    );
  
  ...

https://codepen.io/md-weber/pen/eYzZBZz

另一个解决方案是PageView 小部件。它允许您控制可以显示和替换的不同“页面”小部件。

【讨论】：

整个内容都在可滚动的小部件中，因此内容应该一直可见，但我正在尝试添加一个功能，如果我们点击按钮，整个页面会向上滑动一点或将参考我们想要的特定部分。我曾想过为小部件添加一个全局键，但也无法实现。