如何在Flutter中实现该指定界面效果？

以下是不同技术栈下的具体实现方案：

Flutter 实现方式 #

• 复用自定义AppBar背景色：
  提前定义AppBar的背景色变量，直接赋值给目标容器：

  final appBarColor = Colors.blue;
  
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        backgroundColor: appBarColor,
        title: const Text("Demo"),
      ),
      body: Column(
        children: [
          // 主体中需要同色的区域
          Container(
            color: appBarColor,
            padding: const EdgeInsets.all(16),
            child: const Text("与AppBar同背景色的区域"),
          ),
          const Expanded(child: Center(child: Text("其他内容")))
        ],
      ),
    );
  }
  

• 从主题中获取默认AppBar颜色：
  若AppBar使用主题默认配色，直接从Theme中提取：

  @override
  Widget build(BuildContext context) {
    final appBarColor = Theme.of(context).appBarTheme.backgroundColor;
    return Scaffold(
      appBar: const AppBar(title: Text("Demo")),
      body: Column(
        children: [
          Container(
            color: appBarColor,
            padding: const EdgeInsets.all(16),
            child: const Text("与AppBar同背景色的区域"),
          ),
          // 其他主体内容
        ],
      ),
    );
  }
  

Android 原生（Kotlin）实现方式 #

• 布局中直接引用主题颜色：
  AppBar默认使用主题的colorPrimary，布局里直接通过属性引用：

  <LinearLayout
      android:layout_width="match_parent"
      android:layout_height="wrap_content"
      android:background="?attr/colorPrimary"
      android:padding="16dp">
      <TextView
          android:layout_width="wrap_content"
          android:layout_height="wrap_content"
          android:text="与AppBar同背景色的区域"/>
  </LinearLayout>
  

• 代码动态设置颜色：

  val appBarColor = ContextCompat.getColor(this, R.attr.colorPrimary)
  targetView.setBackgroundColor(appBarColor)
  

React Native 实现方式 #

• 复用组件库主题颜色：
  以react-native-paper的AppBar为例，直接取主题中的主色：

  import { View, Text } from 'react-native';
  import { Appbar, useTheme } from 'react-native-paper';
  
  export default function DemoScreen() {
    const theme = useTheme();
    return (
      <>
        <Appbar.Header>
          <Appbar.Content title="Demo" />
        </Appbar.Header>
        <View
          style={{
            backgroundColor: theme.colors.primary,
            padding: 16,
          }}
        >
          <Text style={{ color: theme.colors.onPrimary }}>与AppBar同背景色的区域</Text>
        </View>
        {/* 其他页面内容 */}
      </>
    );
  }
  

内容的提问来源于stack exchange，提问作者Cliff Odebala Clarke