如何在Singlechild Scrollview中包含的列（Column）中居中Widget？

Question

我正在设计一个从Firestore数据中创建用户组的视图。我想要一个像WhatsApp一样的创建群组设计的视图。以下是我的代码:

@override
 Widget build(BuildContext context) {
   return Scaffold(
     appBar: AppBar(
       backgroundColor: Colors.deepOrange,
       titleSpacing: 0.0,
       centerTitle: true,
       automaticallyImplyLeading: true,
       leading: _isSearching ? const BackButton() : Container(),
       title: _isSearching ? _buildSearchField() : Text("Create Group"),
       actions: _buildActions(),
     ),
     body: _buildGroupWidget(),
     floatingActionButton: FloatingActionButton(
       backgroundColor: Colors.deepOrange,
       elevation: 5.0,
       onPressed: () {
         // create a group
         createGroup();
       },
       child: Icon(
         Icons.send,
         color: Colors.white,
       ),
     ),
   );
 }

 Widget _buildGroupWidget() {
   return SingleChildScrollView(
     child: Column(
       mainAxisAlignment: MainAxisAlignment.center,
       crossAxisAlignment: CrossAxisAlignment.start,
       mainAxisSize: MainAxisSize.max,
       children: <Widget>[
         selectedUserList != null && selectedUserList.length > 0
             ? Container(
                 height: 90.0,
                 child: ListView.builder(
                   shrinkWrap: true,
                   scrollDirection: Axis.horizontal,
                   itemCount: selectedUserList.length,
                   itemBuilder: (BuildContext context, int index) {
                     return GestureDetector(
                       onTap: () {
                         selectedUserList.removeAt(index);
                         setState(() {});
                       },
                       child: Container(
                         margin: EdgeInsets.only(
                             left: 10.0, right: 10.0, top: 10.0, bottom: 10.0),
                         child: Column(
                           children: <Widget>[
                             Container(
                               height: 50.0,
                               width: 50.0,
                               decoration: BoxDecoration(
                                 shape: BoxShape.circle,
//                    color: Colors.primaries[Random().nextInt(Colors.primaries.length)],
                                 color: Colors.primaries[
                                     index % Colors.primaries.length],
                               ),
                             ),
                             Container(
                               height: 20.0,
                               width: 50.0,
                               child: Center(
                                 child: Text(
                                   selectedUserList[index].userName,
                                   softWrap: true,
                                   overflow: TextOverflow.ellipsis,
                                 ),
                               ),
                             ),
                           ],
                         ),
                       ),
                     );
                   },
                 ),
               )
             : Container(),
         Container(
           alignment: Alignment.centerLeft,
           height: 30,
           width: double.infinity,
           decoration: BoxDecoration(
             color: Colors.deepOrange,
             boxShadow: [
               BoxShadow(
                   color: Colors.orange, blurRadius: 5, offset: Offset(0, 2)),
             ],
           ),
           child: Padding(
             padding: const EdgeInsets.symmetric(horizontal: 20.0),
             child: Text(
               "Contacts",
               style: TextStyle(
                 color: Colors.white,
                 fontWeight: FontWeight.w500,
               ),
             ),
           ),
         ),
userList != null && userList.length > 0
             ? ListView.builder(
                 shrinkWrap: true,
                 itemCount: userList.length,
                 physics: NeverScrollableScrollPhysics(),
                 itemBuilder: (BuildContext context, int index) {
                   return ListTile(
                     onTap: () {
                       if (selectedUserList.contains(userList[index])) {
                         selectedUserList.remove(userList[index]);
                       } else {
                         selectedUserList.add(userList[index]);
                       }
                       setState(() {});
                     },
                     title: Text(userList[index].userName),
                     subtitle: Text(userList[index].userContact),
                     leading: CircleAvatar(
                       backgroundColor: Colors.primaries[index],
                     ),
                   );
                 },
               )
             : Center(
                 child: Text("Data Unavailable!!",
                     style: TextStyle(
                         fontSize: 20.0,
                         fontWeight: FontWeight.w500,
                         color: Colors.blueGrey)))
       ],
     ),
   );
 }

我的问题是，我想将最后一个小部件居中，即当没有数据时将看到的居中小部件。我想将其设置为屏幕中央。

但是，它没有居中到屏幕中央。

我已经尝试了Expanded、Flex和其他来源参考的解决方案。但是对我来说都没用。

有人能建议我如何居中显示最后一个小部件吗？

- Mahesh P

---

尝试将最后一个“widget”用具有“mainaxisalignment.spacearound”的“Row”包装起来。 - nmanikiran

不，它没有起作用。顺便说一下，谢谢。 - Mahesh P

Answer 1

我认为“expanded”应该适用于包裹您的最后一个小部件。

但是，如果您发现它不起作用，则可以从全屏幕中删除其他 2 个小部件的高度，因为您的两个小部件都具有静态高度，这里总共为 120。

Container(
                  width: double.infinity,
                  height: MediaQuery.of(context).size.height - 120,
                  child: Center(
                    child: Text("Data Unavailable!!",
                        style: TextStyle(
                            fontSize: 20.0,
                            fontWeight: FontWeight.w500,
                            color: Colors.blueGrey)),
                  ))

这将解决您的问题。

- Jay Mungara