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和其他解决方案。但是，它对我不起作用。

有人可以建议我如何居中放置最后一个小部件吗？

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)),
                  ))

这将解决您的问题。

如何将Widget置于Singlechild Scrollview内包含的列的中心？

1 个答案: