Question

我正面临一个问题，即分隔线的颜色与预期的不一样。所以我有2个分隔线。它们都是Colors.white：

const white = Colors.white;
const transparent = Colors.transparent;

正在发生的事情的图像：

如您所见，有2个分隔线，但是颜色非常不一致。我不知道为什么会这样，因为代码几乎相同。最初我以为是背景，但是在注释掉之后，我发现只有平面页面，颜色仍然不同。有谁知道为什么会这样吗？

这是我的代码：

 @override
 Widget build(BuildContext context) {
   return Scaffold(
     backgroundColor: blue,
     body: 
     SingleChildScrollView(
       child: Center(
         child:Stack(
           children: <Widget>[
            Align(
             // omitted code
            ), 
            Align(
            // omitted code
            ),
            Align(
              alignment:Alignment.center,
              child:  Container(       
                height: MediaQuery.of(context).size.height,
                width: MediaQuery.of(context).size.width/1.2,
                child:   Column(
                  mainAxisAlignment: MainAxisAlignment.center,
                  crossAxisAlignment: CrossAxisAlignment.stretch,
                  children: <Widget>[
                    Expanded(flex:2,child: SizedBox(),),
                    StreamBuilder<QuerySnapshot>(
                    // omitted code
                    ),
                    Expanded(child: SizedBox(),),
                    Expanded(
                      flex: 15,
                      child:Container(
                        child:StreamBuilder<DocumentSnapshot>(
                          stream: Firestore.instance
                            .collection("Users")
                            .document(widget.userEmail)
                            .collection("Flight Data")
                            .document("Courses")
                            .collection(widget.courseAbbr)
                            .document(_dateSelected).snapshots(),
                          builder: (context, snapshot){
                            if (snapshot.hasError) {
                              return new Text('${snapshot.error}');
                            } else if (!snapshot.hasData) {
                              return Center(child: CircularProgressIndicator(valueColor: AlwaysStoppedAnimation<Color>(white),));
                            } else {  
                              switch (snapshot.connectionState) {
                                case ConnectionState.waiting:
                                  return Center(child: CircularProgressIndicator(valueColor: AlwaysStoppedAnimation<Color>(white),)); 
                                default:
                                  var doc = snapshot.data;
                                  return Column(
                                    children: <Widget>[
                                      Expanded(
                                        flex: 7,
                                        child: Container(
                                          decoration: BoxDecoration(
                                            color: blackTrans,
                                            borderRadius: BorderRadius.all(Radius.circular(5.0)),
                                            ),
                                          child: ListView.builder(
                                            scrollDirection: Axis.vertical,
                                            shrinkWrap: true,
                                            itemCount: _dateSelected == null ? 1 : doc["patterns"].length + 1,
                                            itemBuilder: (BuildContext context, int index) {
                                              if (index == 0 ) {
                                                return Column(
                                                  children: <Widget>[
                                                    AutoSizeText(NA_FLIGHT_PAGE_PATTERN, style: TextStyle(color: white),minFontSize: 16.0,), 
                                                    Divider(color: transparent,),
                                                    Divider(color: white,) // 1st DIVIDER
                                                  ],
                                                ); 
                                              }
                                              index -= 1;
                                              var patterns = doc["patterns"];
                                              return buildPatternTile(patterns[index]);                
                                            }
                                          ),
                                        ),
                                      ),
                                      Expanded(flex: 1,child: SizedBox(),),
                                      Expanded(
                                        flex: 4,
                                        child: Container(
                                          decoration: BoxDecoration(
                                            color: blackTrans,
                                            borderRadius: BorderRadius.all(Radius.circular(5.0)),
                                            ),
                                            child: Column(
                                              children: <Widget>[
                                                Divider(color: transparent,),
                                                Divider(color: transparent,),
                                                AutoSizeText(
                                                  _dateSelected == null ? NA_FLIGHT_PAGE_REMARKS2 : doc["instructor"] + NA_FLIGHT_PAGE_REMARKS, 
                                                  style: TextStyle(color: white),minFontSize: 16.0,),
                                                Divider(color: transparent,), 
                                                Divider(color: white,), // 2nd DIVIDER
                                                Divider(color: transparent,),
                                                AutoSizeText(
                                                  _dateSelected == null ? "" : doc["remarks"], 
                                                  style: TextStyle(color: white),minFontSize: 16.0,), 
                                              ],
                                            ),                                          
                                        ),
                                      ),
                                      Expanded(flex: 1,child: SizedBox(),),
                                      Expanded(
                                        flex: 2,
                                        child: Container(
                                          decoration: BoxDecoration(
                                            color: blackTrans,
                                            borderRadius: BorderRadius.all(Radius.circular(5.0)),
                                            ),                                          
                                        ),
                                      ),                                      
                                    ],
                                  );
                              }                 
                            } 
                          },
                        ),
                      ),
                    ),
                    Expanded(child: SizedBox(),),                             
                  ],
                ),
              ),
            ),
           ],
         )
        )
     )
   );
 }

Answer 1

您还可以使用Divider

new Divider(
    height: 20.0,
    color: Colors.white,
  ),

Answer 2

我可以为您提供替代解决方案。这肯定会完成您的工作，并且在分隔线颜色中不会发现任何不一致之处。让我知道你的想法。

想法：

Container（）就在那里


将指定高度

将使用装饰框，在其中使用bottomborder，将给出颜色

在孩子中，您要通过孩子，而您要在孩子的下方边框

为您提供工作示例，并根据您的小部件实现该示例：

Container(
  height: 44.0,
  //this does the work for divider
  decoration: BoxDecoration(
    border: Border(bottom: BorderSide(color: Colors.white, width: 1.0))
  ),
  child: Your_Child_Widget_Here
)

谢谢。编码愉快！

分隔线颜色不一致

2 个答案: