Flutter个人资料概览失效及应用代码运行问题求助

一、代码无法运行的修复 #

你的代码启动后仅显示灰色背景，核心原因是MyApp的home设置为空的Container，没有加载实际带导航栏的MyHomePage组件。

修改MyApp的build方法：

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: MyHomePage(), // 替换原有的Container
      theme: ThemeData(primarySwatch: Colors.blue), // 可选：添加主题优化界面
    );
  }
}

二、个人资料功能的修复 #

切换到Profile标签时看不到表单，是因为body部分仅返回静态文本，没有调用你已编写的_buildProfilePage()方法。同时补充几个细节优化，避免崩溃并提升用户体验：

核心修复：关联Profile标签到表单组件 #

修改MyHomePageState的body逻辑，当_selectedIndex == 2时返回表单组件：

body: _selectedIndex == 0
    ? _buildLocationPage()
    : _selectedIndex == 1
        ? _buildCommunityPage()
        : _selectedIndex == 2
            ? _buildProfilePage()
            : Center(child: Text('Friends content')),

额外优化点 #

1. 替换弃用组件：RaisedButton已被Flutter弃用，改用ElevatedButton
2. 处理输入异常：年份输入的int.parse添加有效性判断，避免非数字输入导致崩溃
3. 添加滚动视图：表单包裹在SingleChildScrollView中，防止键盘弹出时页面溢出
4. 基础表单验证：给输入框添加非空和格式验证，提升交互体验

完整修复后的代码 #

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: MyHomePage(),
      theme: ThemeData(primarySwatch: Colors.blue),
    );
  }
}

class MyHomePage extends StatefulWidget {
  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  int _selectedIndex = 0;
  final _formKey = GlobalKey<FormState>();
  String _motorcycleMake = '';
  String _motorcycleModel = '';
  int? _motorcycleYear; // 改为可空类型，避免初始值0造成误解

  void _onItemTapped(int index) {
    setState(() {
      _selectedIndex = index;
    });
  }

  Widget _buildLocationPage() {
    return Center(child: Text('Location Page'));
  }

  Widget _buildCommunityPage() {
    return Center(child: Text('Community Page'));
  }

  Widget _buildProfilePage() {
    return SingleChildScrollView(
      padding: EdgeInsets.all(16.0),
      child: Form(
        key: _formKey,
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: <Widget>[
            TextFormField(
              decoration: InputDecoration(labelText: 'Make'),
              validator: (value) {
                if (value == null || value.isEmpty) {
                  return '请输入品牌';
                }
                return null;
              },
              onSaved: (String? value) {
                if (value != null) _motorcycleMake = value;
              },
            ),
            TextFormField(
              decoration: InputDecoration(labelText: 'Model'),
              validator: (value) {
                if (value == null || value.isEmpty) {
                  return '请输入型号';
                }
                return null;
              },
              onSaved: (String? value) {
                if (value != null) _motorcycleModel = value;
              },
            ),
            TextFormField(
              decoration: InputDecoration(labelText: 'Year'),
              keyboardType: TextInputType.number,
              validator: (value) {
                if (value == null || value.isEmpty) {
                  return '请输入年份';
                }
                if (int.tryParse(value) == null) {
                  return '请输入有效的数字';
                }
                return null;
              },
              onSaved: (String? value) {
                if (value != null) _motorcycleYear = int.parse(value);
              },
            ),
            SizedBox(height: 20),
            ElevatedButton(
              child: Text('Submit'),
              onPressed: () {
                if (_formKey.currentState!.validate()) {
                  _formKey.currentState!.save();
                  print('Make: $_motorcycleMake');
                  print('Model: $_motorcycleModel');
                  print('Year: $_motorcycleYear');
                  // 可添加提交后逻辑，如保存到本地或服务器
                }
              },
            )
          ],
        ),
      ),
    );
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('摩托车社区')),
      body: _selectedIndex == 0
          ? _buildLocationPage()
          : _selectedIndex == 1
              ? _buildCommunityPage()
              : _selectedIndex == 2
                  ? _buildProfilePage()
                  : Center(child: Text('Friends content')),
      bottomNavigationBar: BottomNavigationBar(
        items: const <BottomNavigationBarItem>[
          BottomNavigationBarItem(
            icon: Icon(Icons.location_on),
            label: 'Location',
          ),
          BottomNavigationBarItem(
            icon: Icon(Icons.group),
            label: 'Community',
          ),
          BottomNavigationBarItem(
            icon: Icon(Icons.person),
            label: 'Profile',
          ),
          BottomNavigationBarItem(
            icon: Icon(Icons.people),
            label: 'Friends',
          ),
        ],
        currentIndex: _selectedIndex,
        selectedItemColor: Colors.blue,
        onTap: _onItemTapped,
      ),
    );
  }
}

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