Flutter 中基于平台自动选择原生组件/小部件

Posted 2023-02-23

【中文标题】Flutter 中基于平台自动选择原生组件/小部件

【英文标题】：Automatically select native components/widgets based on platform in flutter

【发布时间】：2020-05-09 09:11:14

【问题描述】：

flutter中如何根据平台自动选择组件/widget。

例如，如果我们在 ios 中使用下拉菜单，它应该是一个选择器，而在 android 中它应该是弹出窗口和 web 上的普通下拉菜单。

本机组件将在 UI/UX 角度提供额外的良好外观。

如果我们对每个小部件进行平台检查，代码就会变得混乱。

例如：

Cupertino 选择器示例

GestureDetector(
            child: Text("Date"),
            onTap: () 
              showModalBottomSheet(
                  context: context,
                  builder: (BuildContext builder) 
                    return Scaffold(
                        appBar: AppBar(
                          title: Text(
                            "CupertinoPicker",
                            textAlign: TextAlign.justify,
                          ),
                          backgroundColor: Colors.teal,
                          actions: <Widget>[
                            IconButton(
                              icon: Icon(Icons.send),
                              onPressed: () ,
                            )
                          ],
                        ),
                        body: Container(
                          child: CupertinoPicker(
                            magnification: 1.5,
                            backgroundColor: Colors.black87,
                            children: <Widget>[
                              Text(
                                "TextWidget",
                                style: TextStyle(
                                    color: Colors.white, fontSize: 20),
                              ),
                              MaterialButton(
                                child: Text(
                                  "Button Widget",
                                  style: TextStyle(color: Colors.white),
                                ),
                                color: Colors.redAccent,
                              ),
                              IconButton(
                                icon: Icon(Icons.home),
                                color: Colors.white,
                                iconSize: 40,
                                onPressed: () ,
                              )
                            ],
                            itemExtent: 50, //height of each item
                            onSelectedItemChanged: (int index) 
                              selectitem = index;
                            ,
                          ),
                        ));
                  );
            ,
          ),

在这里，我集成了一个样本选择器，并为它的集成花费了很多行，而在 android 中则没有原生的感觉。在ios里很好看。

【问题讨论】：

希望对您有所帮助：medium.com/@mehmetf_71205/…

@KaranMehta 我想通过不为原生组件编写两个部分来减少编码工作。使用单个 Widget 会更好。

@SanjeevS 只需检查这个插件pub.dev/packages/flutter_platform_widgets

由于 Flutter 不使用原生元素（它是绘制自己的元素），您需要指定在哪个平台上使用哪个小部件。

【参考方案1】：

您可以编写任何支持这两种平台的小部件：

class ProgressBar extends StatelessWidget 

  @override
  Widget build(BuildContext context) 
    return Theme
        .of(context)
        .platform == TargetPlatform.iOS ?
    CupertinoActivityIndicator() : CircularProgressIndicator();
  

因此，上述方法相应地构建了 iOS 和 android/fuchsia 小部件。您可以像这样定义任何小部件