如何使用Flutter Widget实现图示设计？请求技术帮助

根据图中设计，我们可以通过Flutter的基础Widget组合来实现，核心分为顶部切换栏、内容展示区、底部操作按钮三个部分，以下是具体实现方式：

1. 核心结构选型 #

• 整体容器用Scaffold，提供标准页面框架
• 顶部切换栏：推荐用SegmentedButton（Flutter 3.10+）实现图中的分段选择样式，或用TabBar配合TabController实现标签切换
• 内容区：根据选中的切换项，用条件渲染或TabBarView展示对应内容
• 底部按钮：通过Padding+ElevatedButton固定在页面底部

2. 完整代码示例 #

方式一：用SegmentedButton实现分段切换 #

import 'package:flutter/material.dart';

void main() => runApp(const DemoApp());

class DemoApp extends StatelessWidget {
  const DemoApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: const SwitchPage(),
      theme: ThemeData(primarySwatch: Colors.blue),
    );
  }
}

class SwitchPage extends StatefulWidget {
  const SwitchPage({super.key});

  @override
  State<SwitchPage> createState() => _SwitchPageState();
}

class _SwitchPageState extends State<SwitchPage> {
  int _selectedTab = 0;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text("示例页面")),
      body: Column(
        children: [
          // 顶部分段切换栏
          Padding(
            padding: const EdgeInsets.all(16),
            child: SegmentedButton<int>(
              segments: const [
                ButtonSegment(value: 0, label: Text("选项1")),
                ButtonSegment(value: 1, label: Text("选项2")),
              ],
              selected: {_selectedTab},
              onSelectionChanged: (newSelection) {
                setState(() => _selectedTab = newSelection.first);
              },
              style: SegmentedButton.styleFrom(
                backgroundColor: Colors.grey.shade100,
                selectedBackgroundColor: Colors.blue.shade50,
              ),
            ),
          ),
          // 内容展示区
          Expanded(
            child: Center(
              child: _selectedTab == 0
                  ? const Text("选项1对应的内容")
                  : const Text("选项2对应的内容"),
            ),
          ),
          // 底部操作按钮
          Padding(
            padding: const EdgeInsets.fromLTRB(16, 0, 16, 24),
            child: ElevatedButton(
              onPressed: () {
                // 此处添加按钮点击逻辑
              },
              style: ElevatedButton.styleFrom(
                minimumSize: const Size(double.infinity, 52),
                shape: RoundedRectangleBorder(
                  borderRadius: BorderRadius.circular(8),
                ),
              ),
              child: const Text("确认"),
            ),
          )
        ],
      ),
    );
  }
}

方式二：用TabBar实现标签切换 #

如果需要更传统的标签栏样式，可以用TabBar+TabBarView组合：

// 仅替换核心部分代码，其余结构同上方示例
class _SwitchPageState extends State<SwitchPage> with SingleTickerProviderStateMixin {
  late TabController _tabController;

  @override
  void initState() {
    super.initState();
    _tabController = TabController(length: 2, vsync: this);
  }

  @override
  void dispose() {
    _tabController.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text("示例页面"),
        bottom: TabBar(
          controller: _tabController,
          tabs: const [Tab(text: "选项1"), Tab(text: "选项2")],
        ),
      ),
      body: TabBarView(
        controller: _tabController,
        children: const [
          Center(child: Text("选项1内容")),
          Center(child: Text("选项2内容")),
        ],
      ),
      bottomNavigationBar: Padding(
        padding: const EdgeInsets.fromLTRB(16, 0, 16, 24),
        child: ElevatedButton(
          onPressed: () {},
          child: const Text("确认"),
        ),
      ),
    );
  }
}

3. 样式自定义说明 #

• 切换栏样式：可通过SegmentedButton.styleFrom或TabBar.theme修改背景色、文字颜色、圆角等
• 底部按钮：通过ElevatedButton.styleFrom调整高度、圆角、背景色
• 内容区：可根据实际需求替换为列表、表单等复杂Widget

内容的提问来源于stack exchange，提问作者Pranav Ratusaria