#flutter
#трепетание
Вопрос:
У меня есть виджет стека со столбцом внутри, а внутри столбца находится 9 контейнеров, внутри каждого контейнера есть виджет карты.
Здесь у вас есть код для первой и второй карточек.
Единственное различие на обеих карточках заключается в том, что на первой есть изображение, текст и расширенный текст. Во втором есть только изображение и текст.
Моя проблема в том, что на первой карточке изображение, текст и развернутый текст не отображаются в центре карточки.
Вывод скриншота:
Я хотел бы, чтобы все карты выглядели одинаково, с развернутым текстом внутри или без него.
Как мне изменить код, чтобы получить это так, как я хочу?
child: Stack(
children: <Widget>[
SafeArea(
child:
Padding(
padding: EdgeInsets.all(26.0),
child: Column(
children: <Widget>[
SizedBox(height: 20),
Expanded(
child: GridView.count(
mainAxisSpacing: 10,
crossAxisSpacing: 10,
primary: false,
crossAxisCount: count,
children: <Widget>[
Container(
child: InkWell(
splashColor: Colors.green,
onTap: () {
print("Card1 Clicked");
Navigator.push(context,
MaterialPageRoute(builder: (BuildContext ctx) => MisClinicas()));
},
child: Card(
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(8),
),
elevation: 4,
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Image.network(
'https://../clinica.png',
height: 65,
),
Text(
'Mi clínica',
style: cardTextStyle,
),
Expanded(
child: Text(
clinicaProvider.clinica,
textAlign: TextAlign.center,
style: TextStyle(
fontSize: 14,
color: Colors.blueAccent
),
),
),
],
),
),
),
),
Container(
child: InkWell(
splashColor: Colors.green,
onTap: () {
print("Card2 Clicked");
Navigator.push (context,
MaterialPageRoute(builder: (BuildContext ctx) => MiPerfil()));
},
child: Card(
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(8)),
elevation: 4,
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Image.network(
'https://.../miperfil.png',
height: 65,
),
Text(
'Mi perfil',
style: cardTextStyle,
)
],
),
),
),
),
Container(
child: InkWell(
splashColor: Colors.green,
onTap: () {
print("Card3 Clicked");
Navigator.push (context,
MaterialPageRoute(builder: (BuildContext ctx) => Pacientes()));
},
child: Card(
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(8)),
elevation: 4,
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Image.network(
'https://capenergy-app.com/iconos_app/pacientes.png',
height: 65,
),
Text(
'Pacientes',
style: cardTextStyle,
)
],
),
),
),
),
Container(
child: InkWell(
splashColor: Colors.green,
onTap: () {
print("Card4 Clicked");
Navigator.push (context,
MaterialPageRoute(builder: (BuildContext ctx) => Agenda()));
},
child: Card(
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(8)),
elevation: 4,
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Image.network(
'https://capenergy-app.com/iconos_app/agenda.png',
height: 65,
),
Text(
'Agenda',
style: cardTextStyle,
)
],
),
),
),
),
Container(
child: InkWell(
splashColor: Colors.green,
onTap: () {
print("Card5 Clicked");
Navigator.push (context,
MaterialPageRoute(builder: (BuildContext ctx) => Chat()));
},
child: Card(
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(8)),
elevation: 4,
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Image.network(
'https://capenergy-app.com/iconos_app/chat.png',
height: 65,
),
Text(
'Chat',
style: cardTextStyle,
),
],
),
),
),
),
Container(
child: InkWell(
splashColor: Colors.green,
onTap: () {
print("Card6 Clicked");
Navigator.push (context,
MaterialPageRoute(builder: (BuildContext ctx) => Sat()));
},
child: Card(
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(8)),
elevation: 4,
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Image.network(
'https://capenergy-app.com/iconos_app/sat.png',
height: 65,
),
Text(
'SAT',
style: cardTextStyle,
)
],
),
),
),
),
Container(
child: InkWell(
splashColor: Colors.green,
onTap: () {
print("Card7 Clicked");
Navigator.push (context,
MaterialPageRoute(builder: (BuildContext ctx) => Tienda()));
},
child: Card(
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(8)),
elevation: 4,
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Image.network(
'https://capenergy-app.com/iconos_app/tienda.png',
height: 65,
),
Text(
'Tienda',
style: cardTextStyle,
)
],
),
),
),
),
Container(
child: InkWell(
splashColor: Colors.green,
onTap: () {
print("Card8 Clicked");
Navigator.push (context,
MaterialPageRoute(builder: (BuildContext ctx) => Privacidad()));
},
child: Card(
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(8)),
elevation: 4,
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Image.network(
'https://capenergy-app.com/iconos_app/privacidad.png',
height: 65,
),
Text(
'Privacidad',
style: cardTextStyle,
)
],
),
),
),
),
Container(
child: InkWell(
splashColor: Colors.green,
onTap: () async {
print("Card9 Clicked");
SharedPreferences prefs =
await SharedPreferences.getInstance();
prefs.remove('email');
clinicaProvider.removeClinica("");
Toast.show("Gracias por usar Capenergy", context,
duration: Toast.LENGTH_LONG,
gravity: Toast.CENTER,
backgroundColor: Color(0xff01A0C7),
textColor: Colors.white);
Navigator.pushReplacement(
context,
MaterialPageRoute(
builder: (BuildContext ctx) => MyApp()));
},
child: Card(
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(8)),
elevation: 4,
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Image.network(
'https://capenergy-app.com/iconos_app/salir.png',
height: 65,
),
Text(
'Cerrar',
style: cardTextStyle,
)
],
),
),
),
)
],
Ответ №1:
Expanded Виджет занимает оставшееся место в вашем столбце.
Вы должны удалить его, чтобы ваши виджеты были центрированы.
Чтобы помочь вам понять ваши проблемы с пользовательским интерфейсом, вы можете активировать режим рисования отладки.
Комментарии:
1. Второй, в вашей карточке