flutter 在生成函数外部使用BuildContext

6tqwzwtp 于 2023-03-24 发布在 Flutter

关注(0)|答案(4)|浏览(135)

我有一个函数，它构建了一个小部件，以便能够重用它，在这个函数中，我想设置文本主题。我的问题是，要做到这一点，我需要访问BuildContext。我能想到的唯一方法是在每个函数调用中将它作为参数传递，但感觉必须有一个更简单的方法。或者这是最好的方法吗？
下面是当前代码：

import 'package:flutter/material.dart';
import 'dart:async';

import 'package:snapping_page_scroll/snapping_page_scroll.dart';

void main() => runApp(MaterialApp(
      theme: ThemeData(
        backgroundColor: Color(0xff121217),
         textTheme: TextTheme(
           headline: TextStyle(fontSize: 40)
         )
      ),
      home: SplashScreen(),
    ));

class SplashScreen extends StatefulWidget {
  @override
  _SplashScreenState createState() => _SplashScreenState();
}

class _SplashScreenState extends State<SplashScreen> {
  @override
  void initState() {
    super.initState();
    loadData();
  }

  //Simulates loading of data
  Future<Timer> loadData() async {
    return new Timer(Duration(seconds: 1), onDoneLoading);
  }

  onDoneLoading() async {
    Navigator.of(context).push(MaterialPageRoute(builder: (context) => Home()));
  }

  @override
  Widget build(BuildContext context) {
    return Container(
      color: Color(0xff121217),
      child: Padding(
        padding: const EdgeInsets.all(20),
        child: Image.asset('assets/logo.png'),
      ),
    );
  }
}

class Home extends StatelessWidget {

  Widget page(text, color, context){
    return Container(
      color: color,
      child: Align(
        alignment: Alignment(0, 0.5),
        child: Text(text, style: Theme.of(context).textTheme.headline,),
      ),
    );
  }

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(),
        body: SnappingPageScroll(
          children: <Widget>[
            page('Page 1', Colors.orange, context),
            page('Page 2', Colors.green, context),
          ],
        ),
      ),
    );
  }
}

flutter

来源：https://stackoverflow.com/questions/58701730/using-buildcontext-outside-build-function

4条答案

按热度按时间

ttvkxqim1#

你可以使用builder widget... https://api.flutter.dev/flutter/widgets/Builder-class.html

赞(0）回复(0）举报 2023-03-24

j2qf4p5b2#

您可以访问build方法中的BuildContext。
因此，您可以将place()函数移动到build内部。

Widget build(BuildContext context) {
  page(text, color) {
    return Container(
      color: color,
      child: Align(
        alignment: Alignment(0, 0.5),
        child: Text(
          text,
          style: Theme.of(context).textTheme.headline,
        ),
      ),
    );
  }

  return MaterialApp(
    home: Scaffold(
      appBar: AppBar(),
      body: Column(
        children: <Widget>[
          page('Page 1', Colors.orange),
          page('Page 2', Colors.green),
        ],
      ),
    ),
  );
}

同样，在像您这样的情况下，一个好的模式是创建自己的可重用Page小部件，并通过构造函数传递参数。

class Home extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(),
        body: Column(
          children: <Widget>[
            _Page(text: 'Page 1', color: Colors.orange),
            _Page(text: 'Page 2', color: Colors.green),
          ],
        ),
      ),
    );
  }
}

class _Page extends StatelessWidget {
  const _Page({
    Key key,
    @required this.color,
    @required this.text,
  }) : super(key: key);

  final Color color;
  final String text;
  @override
  Widget build(BuildContext context) {
    return Container(
      color: color,
      child: Align(
        alignment: Alignment(0, 0.5),
        child: Text(
          text,
          style: Theme.of(context).textTheme.headline,
        ),
      ),
    );
  }
}

赞(0）回复(0）举报 2023-03-24

q0qdq0h23#

将无状态小部件转换为有状态小部件：）

错误消失：）

赞(0）回复(0）举报 2023-03-24

flseospp4#

如果必须在构建上下文中初始化变量，则可以将其声明为late变量，然后在构建上下文中完全初始化它。
示例：

class _ScreenNameState extends State<ScreenName> {
  late final PhoneNumberInputController controller;
  ...
  @override
  Widget build(BuildContext context) {
    controller = PhoneNumberInputController(context);
    ...
  }
  ...
}

赞(0）回复(0）举报 2023-03-24

我来回答

flutter 在生成函数外部使用BuildContext

4条答案

相关问题

热门标签

最新问答