Блог

Главная - Вопросы по программированию - SizedBox не работает внутри listview — Flutter

SizedBox не работает внутри listview — Flutter

#flutter #dart

Вопрос:

  Scaffold(
  appBar: AppBar(
    leading: Icon(Icons.arrow_back),
    centerTitle: true,
    title: Text("Select Time Slot"),
  ),
  body: ListView(
    children: <Widget>[
      SizedBox(
        width: 150,
        child: Card(
          child: Text(
            "11 AM - 1 PM",
            style: TextStyle(fontSize: 20, fontWeight: FontWeight.bold),
          ),
        ),
      )
    ],
  ),
);

Я ожидаю, что эта карта занимает ширину 150, но она полностью доступна.

введите описание изображения здесь

Что я должен сделать, чтобы получить ожидаемый результат?

Комментарии:

1. вы хотите центрировать карту шириной 150

2. @sajithlakmal да, именно так

Ответ №1:

если вы хотите центрировать карту шириной 150, оберните ее виджетом «Центр». виджет центра установит ширину карты на 150 и заполнит оставшуюся ширину, центрируя карту по центру.

       Center(child: 
      SizedBox(
        width: 150,
        child: Card(
          child: Text(
            "11 AM - 1 PM",
            style: TextStyle(fontSize: 20, fontWeight: FontWeight.bold),
          ),
        ),
      ))
    ],

в противном случае вы можете использовать виджет выравнивания, чтобы выровнять карту по своему усмотрению.

Комментарии:

1. прочтите эту статью, если у вас есть дополнительное время, чтобы лучше понять ограничения flutter.dev/документы/разработка/пользовательский интерфейс/макет/ограничения

2. даже вам не нужно указывать ширину.

3. Спасибо, это идеальное решение этого вопроса

Ответ №2:

проверьте это:

 home: Scaffold(
  appBar: AppBar(
    leading: const Icon(Icons.arrow_back),
    centerTitle: true,
    title: const Text("Select Time Slot"),
  ),
  body: ListView(
    children: <Widget>[
      Row(
        children: const <Widget>[
          SizedBox(
            width: 150,
            child: Card(
              child: Text(
                "11 AM - 1 PM",
                style:
                TextStyle(fontSize: 20, fontWeight: FontWeight.bold),
              ),
            ),
          )
        ],
      )
    ],
  ),
)

Комментарии:

1. Не могли бы вы, пожалуйста, объяснить свой ответ или добавить комментарии к своему коду?

Ответ №3:

вместо использования ListView попробуйте использовать Column и обернуть его SingleChildScrollView 

 

 Scaffold(
  appBar: AppBar(
    leading: Icon(Icons.arrow_back),
    centerTitle: true,
    title: Text("Select Time Slot"),
  ),
  body: Container(
height:300;
child:SingleChildScrollView(
   child:Column(
    crossAxisAlignment: CrossAxisAlignment.center
    children: <Widget>[
      SizedBox(
        width: 150,
        child: Card(
          child: Text(
            "11 AM - 1 PM",
            style: TextStyle(fontSize: 20, fontWeight: FontWeight.bold),
          ),
        ),
      )
    ],
  ),
 ),
),
);
Метки: