#flutter
Вопрос:
Это мое первое приложение и мои первые шаги в программировании. Я начал с разработки домашней страницы. Теперь я хочу, чтобы контейнеры действовали как кнопки, чтобы я мог переходить на другие страницы. Я просто не могу придумать, как это сделать. Может быть, у вас, ребята, есть какие-то идеи. Должен ли я удалить 5 контейнеров, добавить 5 кнопок и изменить их дизайн? Я думаю, что может возникнуть проблема, так как я написал кнопки в качестве виджета?
Код до сих пор:
//import 'dart:html';
import 'package:apptierpark/Anfahrt.dart';
import 'package:flutter/material.dart';
void main () => runApp(MaterialApp(home: Tierpark()));
class Tierpark extends StatelessWidget {
get assets => null;
get image => null;
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: PreferredSize(
preferredSize: Size.fromHeight(60.0),
child: AppBar(
title: Text('Tierpark Marzahne',
style: TextStyle (
color: Colors.black,
fontWeight: FontWeight.bold,
fontSize: 45,
fontFamily: 'Amatic',
shadows: [
Shadow(
blurRadius: 10.0,
color: Colors.white,
offset: Offset(5.0, 5.0),
)
]
)),
flexibleSpace: Image(
image: AssetImage('images/urwald4.jpg'),
fit: BoxFit.fill,
),
backgroundColor: Colors.transparent,
),
),
body: Container(
decoration: BoxDecoration(
image: DecorationImage(image: AssetImage('images/bamboo.jpg'), fit: BoxFit.fill)),
child: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children:
<Widget>[
MenuButton2('Bewohner',),
SizedBox(height: 50),
MenuButton2('Parkplan'),
SizedBox(height: 40),
MenuButton2('Zeiten amp; Preise'),
SizedBox(height: 40),
MenuButton2('Anfahrt'),
SizedBox(height: 40),
MenuButton2 ('Über Uns')
]
,)
,)
)
);
}
}
//Button Mainpage Neu
class MenuButton2 extends StatelessWidget {
final String title;
const MenuButton2(this.title);
@override
Widget build(BuildContext context) {
return Container(
decoration: BoxDecoration(
color: const Color(0xFFa9d470),
border: Border.all(
color: const Color(0xFFa9d470)
),
borderRadius: BorderRadius.all(Radius.circular(20)),
boxShadow: [
BoxShadow(
color: Colors.black.withOpacity(0.9),
spreadRadius: 10,
blurRadius: 12
)
]
),
width: MediaQuery.of(context).size.height*0.38,
height: MediaQuery.of(context).size.height*0.11,
child: Align(
alignment: Alignment.center,
child: Text (title,
style: TextStyle(
fontSize: 50,
fontFamily: 'Amatic',
fontWeight: FontWeight.bold
),))
);
}
}
Комментарии:
1. Вы можете обернуть контейнеры с помощью детектора жестов или чернильницы
Ответ №1:
Оберните Container с GestureDetector помощью или InkWell подобным образом и вызывайте функции с его свойствами,
class MenuButton2 extends StatelessWidget {
final String title;
final int buttonId;
const MenuButton2(this.title,this.buttonId);
@override
Widget build(BuildContext context) {
return InkWell(
onTap: () {
if(buttonId == 1){
// do 1
}
else if(buttonId == 2){
// do 2
}
else if(buttonId == 3){
// do 3
}
else if(buttonId == 4){
// do 4
}
else {
// do 5
}
},
child:Container(
decoration: BoxDecoration(
color: const Color(0xFFa9d470),
border: Border.all(
color: const Color(0xFFa9d470)
),
borderRadius: BorderRadius.all(Radius.circular(20)),
boxShadow: [
BoxShadow(
color: Colors.black.withOpacity(0.9),
spreadRadius: 10,
blurRadius: 12
)
]
),
width: MediaQuery.of(context).size.height*0.38,
height: MediaQuery.of(context).size.height*0.11,
child: Align(
alignment: Alignment.center,
child: Text (title,
style: TextStyle(
fontSize: 50,
fontFamily: 'Amatic',
fontWeight: FontWeight.bold
),
),
),
);
}
И в том месте, где вы вызываете функцию, сделайте это,
...
<Widget>[
MenuButton2('Bewohner', 1),
SizedBox(height: 50),
MenuButton2('Parkplan', 2),
SizedBox(height: 40),
MenuButton2('Zeiten amp; Preise', 3),
SizedBox(height: 40),
MenuButton2('Anfahrt', 4),
SizedBox(height: 40),
MenuButton2 ('Über Uns', 5)
],
...
Комментарии:
1. я завернул контейнер в чернильницу и добавил onTab к новому маршруту. Все «Кнопки» ведут к одному и тому же маршруту. Есть ли способ вывести их всех на один маршрут, не записывая его по частям?
2. Вы хотите вызвать разные функции для каждой кнопки?
3. ДА. Я подумал, что это может сработать так же, как я сделал с текстом. Каждая кнопка имеет свой текст.
4. Да, точно так же, как вы отправили
title, вы можете отправить уникальный идентификатор для каждой кнопки. Проверьте обновленный ответ 🙂5. Ладно, это сработало для меня. Большое вам спасибо:)
Ответ №2:
Добавьте свой Container внутренний Inkwell или GestureDetector внешний код, см. ниже, надеюсь, он вам поможет.
// GestureDetector( you use GestureDetector also here instead of InkWell Widgets
InkWell(
onTap: () {
print('button Pressed');
// Call your onPressed or onTap function here
},
child: Container(
alignment: Alignment.center,
decoration: BoxDecoration(
color: Colors.blue,
borderRadius: BorderRadius.all(
Radius.circular(30),
),
),
height: 50,
width: 200,
child: Text(
'Search',
style: TextStyle(
color: Colors.white,
fontSize: 20,
),
),
),
),
Ваш экран результатов -> 