Question

我在主屏幕上有五个项目，当我按下一个项目时我想做的事情转到相应的页面。不确定如何使用InkWell功能将水龙头从第一主页推到第二页。

不确定下面的代码是否在正确的轨道上，或者是否需要转向其他方向。

Main.dart

import 'package:flutter/material.dart';
import './food_catefgories.dart';
import './main_categories_screen.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Made in Canada Stuff',
      theme: ThemeData(
        primarySwatch: Colors.blue,
        canvasColor: Color.fromRGBO(225, 254, 229, 1),
        textTheme: ThemeData.light().textTheme.copyWith(
             body1: TextStyle(
               color: Color.fromRGBO(20, 51, 51, 1),
             ),
             body2: TextStyle(
               color: Color.fromRGBO(20, 51, 51, 1),
             ),
             title: TextStyle(
               fontSize: 20,
               fontFamily: 'RobotoCondensed',
               fontWeight: FontWeight.bold,
             )),
      ),
      home: MainCategoriesScreen(),
      initialRoute: '/spalsh',
         routes: {
            '/splash': (context) => MainCategoriesScreen(),
            '/one': (context) => OneCategoriesScreen(),
            '/two': (context) => TwoCategoriesScreen(),
            '/three': (context) => ThreeCategoriesScreen(),
            '/four': (context) => FourCategoriesScreen(),
            '/five': (context) => FiveCategoriesScreen(),
  },
    );
  }
}

main_categories_screen.dart

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

class Category {
  final String id;
  final String title;
  final Color color;

  const Category({
    this.id,
    this.title,
    this.color = Colors.orange,
  });
}

const MAINCAT_CATEGORIES = const [
  Category(
    id: 'c1',
    title: "ONE",
    color: Colors.purple,
  ),
  Category(
    id: 'c2',
    title: "TWO",
    color: Colors.red,
  ),
Category(
    id: 'c3',
    title: "THREE",
    color: Colors.blue,
  ),
];

class MainCategoriesScreen extends StatelessWidget {
  @override 
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Made title'),
      ),
      body: GridView(
        padding: const EdgeInsets.all(25),
      children: MAINCAT_CATEGORIES
          .map((catData) => CategoryItem(
            catData.title,
            catData.color,
          ),

          )
          .toList(),
      gridDelegate: SliverGridDelegateWithMaxCrossAxisExtent(
        maxCrossAxisExtent: 200,
        childAspectRatio: 3 / 2,
        crossAxisSpacing: 20,
        mainAxisSpacing: 20,
      ),
    ),
    ); 
  }
}

category_item.dart

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

class CategoryItem extends StatelessWidget {
  final String title;
  final Color color;

  CategoryItem(this.title, this.color);

  void selectCategory(BuildContext ctx) {
    Navigator.of(ctx).push(
      MaterialPageRoute(
        builder: (_) {
      return MainCategoriesScreen();
    },),);
  }

  @override 
  Widget build(BuildContext context) {
    return InkWell(
        onTap: () => selectCategory(context),
        splashColor: Theme.of(context).primaryColor,
        borderRadius: BorderRadius.circular(15), 
        child: Container(
      padding: const EdgeInsets.all(15),
      child: Text(title,
      style: Theme.of(context).textTheme.title,
      ),
      decoration: BoxDecoration(gradient: LinearGradient(
        colors: [
          color.withOpacity(0.7),
          color,
      ],
      begin: Alignment.topLeft,
      end: Alignment.bottomRight,
      ),
      borderRadius: BorderRadius.circular(15),
      ),
        ),
    );
  }
}

Answer 1

您可以从一个屏幕导航到另一个屏幕，并使用Navigate类传递数据例如我正在我的应用程序中使用。

<div class="container">
  <div class="element"></div>
</div>

Answer 2

Navigator.push(context,MaterialPageRoute(builder: 
 (context) => Home(userRole: role))),

或

 Navigator.pushNamed(context, '/first');

确保在使用第二行之前，您必须像在MaterialApp中一样声明所有页面

initialRoute: '/spalsh',
  routes: {
    '/': (context) => LoginScreen(),
    '/spalsh':(context)=>SplashScreen(),
    '/first': (context) => FirstScreen(),
    '/leave': (context) => ApplyLeave(),
    '/bill': (context) => ApplyBill(),
    '/contact': (context) => ContactUs(),
    '/four': (context) => ScreenFour(),
    '/five': (context) => ScreenFive(),
    '/six': (context) => ScreenSix(),
    '/seven': (context) => ScreenSeven(),
  },

Answer 3

//Navigate to other page with class name and parameters
 Navigator.push(
            context, MaterialPageRoute(builder: (context) => FoodCategoriesScreen(title:"Items")));
//class name is FoodCategoriesScreen and the parameter is title to which we are assigning a value "Items".
//Navigator through routes that you have specified in your code (without parameters)
 Navigator.pushNamed(context, '/food');

将主页推到第二页

3 个答案: