如何根据用户点击进入的页面设置appTitle?

问题描述 投票:0回答:1

首页有一个平面图的视图,每个房间 "显示 "不同的作品(见附图)。HomePage

当应用程序打开时,画廊名称{salmonComplex}显示为标题,但当用户进入其中一个房间时,我希望房间名称能够取代或出现在{salmonComplex}下面。

我创建了一个类 MainPageHeading 和a List<String> 来生成标题,用一个int mainPageNumber 所以我可以生成标题(我从我最近的一个课程中建立的一个测验应用程序中借用了这个想法)。

事情是这样的

有没有一种方法可以显示不同的房间名称,而不必复制整个classeg使用所有的代码,在一个新的类名,说原始的ExhibitionHeading。

我的意思是这是长篇大论,但是否有办法使用List和parcel的位我需要。

现在,它通过MainPageHeading[]在列表中寻找。锁定页面标题.是否有更好的方法来包裹房间标题,取决于用户进入的房间。

任何想法都会节省我的时间。

谢谢

    class MainPageHeading extends StatefulWidget {
    @override
    _MainPageHeadingState createState() => _MainPageHeadingState();
    }

    class _MainPageHeadingState extends State<MainPageHeading> {
    List<String> mainPageHeading = [
    '{ theSalmon', //0 mainloading page heading
    'Complex', //1
    ' }' //2
    ];

    int mainPageNumber = 0;

    @override
    Widget build(BuildContext context) {
     return Container(
      child: RichText(
       text: TextSpan(
        text: mainPageHeading[0],
         style: TextStyle(
            color: Colors.grey[700],
            fontFamily: 'saturn',
            fontSize: 25.0,
            fontWeight: FontWeight.bold),
        children: [
          TextSpan(
              text: mainPageHeading[1],
              style: TextStyle(
                color: Colors.grey[500],
                fontFamily: 'saturn',
                fontSize: 25.0,
                fontStyle: FontStyle.italic,
              )),
          TextSpan(
              text: mainPageHeading[2],
              style: TextStyle(
                color: Colors.grey[700],
                fontFamily: 'saturn',
                fontSize: 25.0,
                fontWeight: FontWeight.bold,
              )),
             ]),
            textAlign: TextAlign.center,
           ),
          );
          }
         }



           [homePage][1]

emulator img

    void main() {
    runApp(AppState());
    }

    class AppState extends StatefulWidget {
    @override
    _AppStateState createState() => _AppStateState();
    }

    class _AppStateState extends State<AppState> {
    var titleText = "FirstTitle";

     @override
    Widget build(BuildContext context) {
    return MaterialApp(
      title: "Titolo",
      theme: ThemeData(primarySwatch: Colors.blue),
      home: Scaffold(
        appBar: AppBar(
          title: TitleWidget(),
        ),
        body: Center(
          child: FlatButton(
            child: Text("Change title"),
            onPressed: () {
              setState(() {
                titleText = "Other Title";
              });
            },
          ),
        ),
      ),
      );
     }
     }

     class TitleWidget extends StatelessWidget {
     final titleText;

     TitleWidget({this.titleText});

    @override
    Widget build(BuildContext context) {
     return Text(titleText);
    }
    }
flutter flutter-layout
1个回答
0
投票

我写了一些示例代码,为你展示如何做这样的事情。

void main() {
  runApp(AppState());
}

class AppState extends StatefulWidget {
  @override
  _AppStateState createState() => _AppStateState();
}

class _AppStateState extends State<AppState> {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
        title: "Titolo",
        theme: ThemeData(primarySwatch: Colors.blue),
        home: HomeScreen());
  }
}

class HomeScreen extends StatefulWidget {
  @override
  _HomeScreenState createState() => _HomeScreenState();
}

class _HomeScreenState extends State<HomeScreen> {
  List<String> mainPageHeading = [
    '{ theSalmon', //0 mainloading page heading
    'Complex', //1
    ' }' //2
  ];

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: TitleWidget(
          mainPageHeading: mainPageHeading,
        ),
      ),
      body: Center(
        child: FlatButton(
          child: Text("Change title"),
          onPressed: () {
            setState(() {
              mainPageHeading = ["The", "Other", "Title"];
            });
          },
        ),
      ),
    );
  }
}

class TitleWidget extends StatelessWidget {
  final List<String> mainPageHeading;

  TitleWidget({@required this.mainPageHeading});

  @override
  Widget build(BuildContext context) {
    return Container(
      child: RichText(
        text: TextSpan(
            text: mainPageHeading[0],
            style: TextStyle(
                color: Colors.grey[700],
                fontFamily: 'saturn',
                fontSize: 25.0,
                fontWeight: FontWeight.bold),
            children: [
              TextSpan(
                  text: mainPageHeading[1],
                  style: TextStyle(
                    color: Colors.grey[500],
                    fontFamily: 'saturn',
                    fontSize: 25.0,
                    fontStyle: FontStyle.italic,
                  )),
              TextSpan(
                  text: mainPageHeading[2],
                  style: TextStyle(
                    color: Colors.grey[700],
                    fontFamily: 'saturn',
                    fontSize: 25.0,
                    fontWeight: FontWeight.bold,
                  )),
            ]),
        textAlign: TextAlign.center,
      ),
    );
  }
}

AppBars的标题由变量 "AppBars "设置。titleText. 我有一个 FlatButton 用函数改变 titleText 到不同的文本。请注意,我在一个 setState setState使得flutter重新加载你的UI,更新任何已经改变的东西。所以当我点击按钮时,变量会被更新,UI会重新加载显示新的标题。

当然,你可以将更多的变量传递给 TitleWidget.

所以当你点击你的一个部分时,在里面放一个setState,然后更新任何你需要控制标题的变量。

我希望这能让你明白,如果你需要更多帮助,请随时提问。祝您好运!

EDIT:抱歉,我在不同的屏幕设置下测试了代码,这导致了你的一些问题。HomeScreen 代码到一个单独的小组件中。这是一个很好的做法,如果您想调用 setState (就像我们一样).你得到红条的原因是你从来没有把titleText传给Widget,所以它试图获取一个不存在的字符串,并抛出了错误。你得到红条的原因是你从来没有把titleText传给Widget,所以它试图得到一个不存在的字符串,并抛出了一个错误。

另外,当出现问题时,一定要注意你的输出窗口,通常它会给你有用的错误信息(滚动到错误日志的顶部,顶部是最重要的部分)。

© www.soinside.com 2019 - 2024. All rights reserved.